javascript - jQuery:影响相同深度的列表元素

Question

我正在努力创建一个嵌套列表，该列表实质上是引导用户通过一组响应来获得适当的信息。

像这样:

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

感谢您的帮助。

Answer 1

您需要使用直接子级语法:

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

或者，更简洁地说，

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