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：影響同一深度的列表元素

回答

相關問題