层次结构和多选项下拉列表(HTML），并在项目之间导航(子节点）

Hierarchy and multiple option drop down list (HTML) and navigate between items (Child nodes)

本文关键字：项目 之间 导航 子节点 下拉列表 选项 HTML 层次结构      更新时间：2023-09-26

嗨：）我需要制作HTML层次结构下拉列表，它由级别（选项）组成，每个选项如果有子节点，我们会看到旁边的箭头。如果我们点击这个箭头，所有这些选项都会消失，所有子节点都会出现。。。。。每一个都有一个箭头在左边，另一个在右边。如果我们点击左箭头，所有这些选项都将消失，父级将出现，如果我们点击右箭头，下一级将出现等等。当我搜索它时，我发现了树下拉列表，但我的经理不想要它：（…..如果有人对这个下拉列表有任何想法或链接，请联系我……谢谢：）

http://jsfiddle.net/1jwyauLy/

<ul class="level1">
    <li> <span> &rarr; Option 1</span>
        <ul class="level2">
            <li> <span class="lar">&larr;</span> Option 1.1</li>
            <li> <span class="lar">&larr;</span> Option 1.2</li>
            <li> <span class="lar">&larr;</span> Option 1.3</li>
        </ul>
    </li>
    <li> <span>  &rarr; Option 2</span>
        <ul class="level2">
            <li> <span class="lar">&larr;</span> Option 2.1</li>
            <li> <span class="lar">&larr;</span> Option 2.2</li>
            <li> <span class="lar">&larr;</span> Option 2.3</li>
        </ul>
    </li>
    <li><span>  &rarr; Option 3</span>
        <ul class="level2">
            <li> <span class="lar">&larr;</span> Option 3.1</li>
            <li> <span class="lar">&larr;</span> Option 3.2</li>
            <li> <span class="lar">&larr;</span> Option 3.3</li>
        </ul>
    </li>
</ul>



$(".level2").hide();
$(".level1>li").on("click", function () {
    $(this).find(".level2").show();
    $(this).find(">span").hide();
    $(".level1>li").not(this).hide();
})
$(".lar").on("click", function () {
    $(".level1>li").show();
    $(".level2").hide();
    $(this).closest(".level2").prev("span").show();
    return false;
})



ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
相关文章：