从其他兄弟姐妹中删除类答案

【问题标题】：Remove class from other siblings从其他兄弟姐妹中删除类
【发布时间】：2015-04-16 05:11:49
【问题描述】：

我有一个类似的结构

<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');

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

【问题讨论】：

请分享您的 onclick 处理程序，以便我们了解您实际尝试执行的操作
你能提供一个小提琴吗？？？
@GuruprasadRao 我确实想要responsiweb.com/themes/preview/ace/1.3.3 的侧边菜单 ..单击子子项其他将被关闭

标签： jquery css list selectors-api

【解决方案1】：

试试这个：

$($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

【讨论】：

thnx 它的部分工作隐藏了第一个 lis ul，但也隐藏了第二个 lis ul
@BDhara 请重新测试。
它隐藏了父 ul 而我只想要 li 隐藏
@BDhara 请重新测试。
- AiringCupboard
  
  音频
  
  厨房
  
  音频

【解决方案2】：

试试这个：

$(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

【讨论】：

哦，是的！它是，但你无法想象它！您可能需要添加一些子菜单才能完美显示它！否则我只是在 DOM 中注意到它！
@GuruprasadRao 更新了小提琴.. 那怎么样.. ?
@BDhara 你现在可以看到小提琴了，也许这次你得到了照片？？
- AiringCupboard
  
  音频
  
  厨房
  
  音频
我有两次导航显示..我想要第二次导航显示隐藏

【解决方案3】：

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

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

【讨论】：

还是和以前一样..没有影响

【解决方案4】：

试试这个编码

$("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');
});

【讨论】：

它隐藏了整个父 ul 而不是 li

【解决方案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');

【讨论】：