从其他兄弟姐妹中删除 class

Question

我有这样的结构

<ul>
  <li class="open active">
    <a></a>
    <ul class="submenu nav-show" style="display:block"></ul>
  </li>
  <li class="">
    <a></a>
    <ul></ul>
 </li>
</ul>

当用户点击第二个 li 时，第一个 li's ul 包含 nav-show 将是 nav-hide 并且样式将是 display:hide

到现在我已经试过了

var open = document.querySelectorAll(".open");
var a=$(open).closest("li").addClass('active').siblings().removeClass('active');
$(a).siblings().closest("ul").removeClass('nav-hide').addClass('nav-show');

但是它不起作用也试过

var open = document.querySelectorAll(".open");
$(open).closest("li").addClass('active').siblings().removeClass('active');
$(open).not(":has(.active)").collapse('hide');

但没有给出正确的输出请帮助我

Answer 1

closest 函数将获取元素的最近父级。在你的情况下 open 将与你想要 .active 的元素相同。

尝试将 var a=$(open).closest("li") 更改为 var a=$(open)，看看是否有帮助

Answer 2

试试这个：

$($p).closest('li').addClass('active').siblings().removeClass('active').end()
.parent().children().filter(function(){return $(this).find('.nav-show ').length>0}).addClass('.nav-hide').hide();

或者

$($p).closest('li').addClass('active').siblings().removeClass('active').end()
.siblings().filter(function(){return $(this).find('.nav-show ').length>0}).addClass('.nav-hide').hide();

试试这个jsfiddle

Answer 3

试试这个编码

$("li > a").click(function() {
        var $div1 = $(this).next();
        $(".submenu").not($div1).hide();
        $div1.show();
        var $div2=$(this).parent();
        $("li").not($div2).removeClass('active');
        $div2.addClass('active');
});

Answer 4

试试这个：

$(document).ready(function(){
    $("li").click(function(){
        $(this).siblings("li.active").find("ul.nav-show:eq(1)").removeClass("nav-show").addClass("nav-hide");
        $(this).siblings("li.active").removeClass("active");
        $(this).addClass("active");
        $(this).find("ul").removeClass("nav-hide").addClass("nav-show");
    });
});

DEMO

Answer 5

你可以试试

$('.open').addClass('active').find('ul').removeClass('nav-hide').addClass('nav-show').end().siblings('.active').removeClass('active').find('ul').addClass('nav-hide').removeClass('nav-show');

同样可以写成

var $li = $('.open').addClass('active');
$li.find('ul').removeClass('nav-hide').addClass('nav-show');
$li.siblings('.active').removeClass('active').find('ul').addClass('nav-hide').removeClass('nav-show');

从其他兄弟姐妹中删除 class

Remove class from other siblings

jquery

css

list

selectors-api