Question

我想在关闭切换时从父项中删除“open”类，但是下面的代码不起作用。它添加了“open”类，但在关闭时不会删除。谁能看到我哪里错了？

$('.sub-menu').hide();
$('.toggle').click(function () {
    if (!$(".sub-menu").is(":visible"))
        $(this).addClass("open");

    $(this).next('.sub-menu').slideToggle(function () {
        if (!$(".sub-menu").is(":visible"))
            $(this).parent('.toggle').removeClass("open");
    });

});

更新：“导航”的HTML低于要求。

<dd class="toggle open">
    <a id="navProducts">Products</a>
</dd>
<div class="sub-menu" style="display: block;">    
   <dd class="sub-menu-option">
     <a id="navBluray" href="nhdadmin/products/bluray">Blu-ray</a>
   </dd>
   <dd class="sub-menu-option">
     <a id="navXbox" href="nhdadmin/products/xbox">Xbox</a>
   </dd>
   <dd class="sub-menu-option">
     <a id="navPlayStation" href="nhdadmin/products/playstation">PlayStation</a>
   </dd>

Answer 1

您在点击时将“打开”类添加到.toggle元素。然后尝试将其从$(this)（切换元素）.parent('.toggle')中删除（切换元素的类的父级“切换” - 不存在）。

删除.parent('.toggle')，您的代码就可以使用。

Answer 2

试试这个：

$('.toggle').click(function () {
   if (!$(".sub-menu").is(":visible"))
       $(this).addClass("open");

   var currentSlide = $(this);
   $(this).next('.sub-menu').slideToggle(function () {
       if (!$(".sub-menu").is(":visible"))
           currentSlide.removeClass("open");
   });
});

Answer 3

尝试

$('.sub-menu').hide();
$('.toggle').click(function () {
    var toggle = $(this);

    toggle.next('.sub-menu').slideToggle(function () {
        if ($(this).is(":visible")){
            toggle.addClass("open");
        } else {
            toggle.removeClass("open");
        }
    });

});

Answer 4

试试这个

$(this).parent('.toggle').removeClass("open");

代替

$(this).prev('.toggle').removeClass("open");

希望它会有所帮助

jquery从父div中删除类

4 个答案: