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

Answer 2

您可能想要更改$("#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/

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

2 个答案: