jQuery：影响同一深度的列表元素

我正在创建一个嵌套列表，基本上让用户通过一组响应来获得适当的信息。jQuery：影响同一深度的列表元素

事情是这样的：

<ul id="questions"> 
    <li>I will be traveling in the summer. 
     <ul class="sub hidden"> 
      <li>I will take a plane</li> 
      <li>I will drive</li> 
      <li>I will take a train</li> 
     </ul> 
    </li> 
    <li>I will be traveling in the summer. 
     <ul class="sub hidden"> 
      <li>I will take a plane.</li> 
      <li>I will drive</li> 
      <li>I will take a train</li> 
     </ul> 
    </li> 
</ul>

理想的情况下，用户可能会到达这个页面上，选择“我将在夏天旅行”。第二个选项会淡入灰色，嵌套的子选项会出现。然后，如果用户选择“我将开车”，则他们可以被呈现更多的子选项，并且另外两个选项将会消失。

我可以得到第一层选项，以我需要的方式工作。但是，当用户点击li元素时，我不确定如何让所有未选中的li元素处于相同的深度并使其淡出。

$(document).ready(function() {  
    $("#questions li").click(function() { 
     $(this).addClass('selected').removeClass('fade'); 
     $(this).children().removeClass('hidden'); 
     $("ul#questions li").not('.selected').addClass('fade'); 
    });        
});

谢谢你的帮助。

来源

2013-12-11 Vecta

你想使用直接孩子语法：

$('#questions > li').not('.selected').addClass('fade');

，或者更简洁，

$('#questions > li:not(.selected)').addClass('fade');

来源

2013-12-11 20:13:03 voithos

这不回答这个问题，它选择始终是一级。问题是*我不知道如何在同一深度获取所有未选定的li元素并使它们淡出*，并且应该是'$（this）.siblings（'li：not（.selected）'）。 addClass（'fade'）;' – FiLeVeR10

你想改变$("#questions li").click

直接选择li这样的孩子$("#questions>li").click

和$("ul#questions li").not('.selected')

你想要的东西更像.parent().children('li:not(.selected)')

使当前li，和它的兄弟姐妹都受到影响。

与此类似

$("#questions>li").click(function() { 
    $(this).toggleClass('selected')//toggle selected 
    .children().show().end()//show sub 
    .parent().children('li:not(.selected)')//select !selected 
    .children(':visible').hide();//hide !selected sub 
});

的东西做了一个小提琴：http://jsfiddle.net/filever10/9hNXG/

来源

2013-12-11 20:37:57 FiLeVeR10

@Vecta是否解决了这个问题？ – FiLeVeR10

jQuery：影响同一深度的列表元素

回答

相关问题