下拉菜单，如果类已打开，则删除该类

dropdown menu , remove class if its open

本文关键字：删除 如果 下拉菜单      更新时间：2023-09-26

我正在尝试创建下拉菜单，我是这样做的，默认情况下，在下拉菜单上我正在进行

.dropdown {
    display: none;
}

然后我在点击时创建事件，并基于该上下文切换类

.active { display block; }

现在我不知道当我点击其他按钮或在文档中时如何删除.active类，如果用户点击其他按钮演示

，我不想保持下拉列表活动类

http://jsfiddle.net/pnLkpxkb/8/

$(function () {
    // The user clicks anywhere in the document
    $(document).click(function (e) {
        // If a dropdown has a class active AND if the dropdown or the link is not the target of the click
        if ($("ul.dropdown").hasClass("active") && !$("ul.dropdown, .btn > a").is(e.target)) {
            // Remove class active
            $("ul.dropdown.active").removeClass("active");
        }
    });
    var dropdown = $(".btn > a");
    // The user clicks on a toggle link (One or Two)
    dropdown.on("click", function () {
        // Remove the active class from the active element
        $("ul.dropdown.active").removeClass("active");
        // Add class to the relevant sub menu
        $(this).siblings("ul.dropdown").addClass("active");
    });
}());

评论后更新

您不需要将""与this关键字放在一起。您的代码行应该是：

$(this).siblings("ul.dropdown").toggleClass("active");

完整代码

$(function () {
var dropdown = $(".btn").find("a");
dropdown.on("click", function() {
$("ul.dropdown.active").removeClass("active");  //added new line
$(this).siblings("ul.dropdown").toggleClass("active");
});
}());

使用Remove Class更新代码

toggleClass无法按您的意愿工作。对于你的情况，我建议走这条路：

$(function () {
    var dropdown = $(".btn").find("a");
    dropdown.on("click", function() {
        $("ul.dropdown").removeClass("active");//add this to remove class from all ul .dropdowns
        $(this).siblings("ul.dropdown").addClass("active");//Add class to your ul dropdown. Here you can use toggleClass too
    });
}());

小提琴

$(function () {
    $(document).on('click', function () {
        $("ul.dropdown").removeClass('active');
    });
    $(".btn a").on("click", function (e) {
        e.stopPropagation();
        $("ul.dropdown").removeClass('active');
        $(this).siblings("ul.dropdown").addClass("active");
    });
});

JSFiddle演示。

相关文章：