Question

我有一个具有树结构的无序列表。我想要实现的是用户看到一个选择列表。并且仅向用户显示一级项目。

然后，如果用户点击一个项目并且该项目具有子项，则显示该项目的绝对子项，依此类推。

$("#dropDownMenu #tree  li").each(function () {
    $(this).addClass('hide');
});

$("#dropDownMenu #tree > li").each(function () {
    $(this).removeClass('hide');
});

        <div id="dropDownMenu">
        <div>
            <button id="clickMe">Click here</button>
        </div>
        <ul id="tree" class="tree no-bullet" style="display:none">
            <li>
                Animals
                <ul>
                    <li>Birds</li>
                    <li>
                        Mammals
                        <ul>
                            <li>Elephant</li>
                            <li>Mouse</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                Animals1

            </li>
        </ul>
    </div>

有没有好的方法可以做到这一点，因为我会有不同数量的级别？

Answer 1

对于上述结构，我们可以使用以下代码：

$(document).ready(function(e) {
    $("#clickMe").on("click", function(){
        $("#tree").show();
    });
    $("li").on("click", function(){
        if($(this).children("ul")){
            $(this).children("ul").show();
        }
    });
});

使ul表现得像选择列表

1 个答案: