Question

我正在尝试创建一个多级列表，该列表最初应如下所示：

    Level_1
    Level_1

然后当我点击其中一个“Level_1”文本（比如最上面一个）时，应出现“Level_2”，如下所示：

    Level_1
        Level_2
        Level_2
    Level_1

然后当我点击“Level_2”（比如底部的那个）时，“Level_3”应出现在点击的“Level_2”下面，如下所示：

    Level_1
        Level_2
        Level_2
            Level_3
            Level_3
            Level_3
    Level_1

然后当我再次点击第二个“Level_2”时，它应该恢复到

    Level_1
        Level_2
        Level_2
    Level_1

以下是我到目前为止（我怀疑它不起作用，因为当我点击“Level_2”时，jQuery功能激活两次，一次用于“ Level_1“（作为”Level_2“嵌入”Level_1“）和一次”Level_2“）：

jQuery的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $(".Level_3").click(function(){
    console.log( $(this) )
        jQuery(this).find(".Level_4").toggle();
    });

    $(".Level_2").click(function(){
        jQuery(this).find(".Level_3").toggle();
    });

    $(".Level_1").click(function(){
        jQuery(this).find(".Level_2").toggle();
    });

});
</script>

CSS：

<style>
.Level_1 {
    text-indent: 25px;
    z-index: 1;
    background-color: Red;
}

.Level_2 {
    text-indent: 50px;
    z-index: 2;
    background-color: Green;
}

.Level_3 {
    text-indent: 75px;
    z-index: 3;
    background-color: Blue;
}
</style>

HTML：

<div class="Level_1">
Level_1
    <div class="Level_2">
        Level_2
        <div class="Level_3">Level_3</div>
    </div>
    <div class="Level_2">
        Level_2
        <div class="Level_3">Level_3</div>
        <div class="Level_3">Level_3</div>
        <div class="Level_3">Level_3</div>
    </div>
</div>

<div class="Level_1">
Level_1
    <div class="Level_2">
        Level_2
        <div class="Level_3">Level_3</div>
    </div>
    <div class="Level_2">
        Level_2
        <div class="Level_3">Level_3</div>
        <div class="Level_3">Level_3</div>
        <div class="Level_3">Level_3</div>
    </div>
</div>

在每次点击“Level_1”和“Level_2”之后它应该如何（“Level_3”稍后将成为另一页的链接）：

    Level_1
        Level_2
            Level_3
        Level_2
            Level_3
            Level_3
            Level_3
    Level_1
        Level_2
            Level_3
        Level_2
            Level_3
            Level_3
            Level_3

Answer 1

您应该控制点击事件的目标

 $(document).ready(function(){

    $(".Level_3").click(function(e){
      if ( $(e.target).is('.Level_3') ){
         $(this).find(".Level_4").toggle();
       }
    });

    $(".Level_2").click(function(e){
      if ( $(e.target).is('.level_2') ){
          $(this).find(".Level_3").toggle();
       }
    });

    $(".Level_1").click(function(e){
        if ( $(e.target).is('.level_1') ){
           $(this).find(".Level_2").toggle();
        }
    });

});

Working example

Answer 2

如果你想保持div风格的布局，我建议做这样的事情：http://jsfiddle.net/MDp5h/5/

它只需要在html和几行css中进行一点标记更改（见下文）。它还提供了一些好处 -

所有菜单将开始关闭
jQuery简洁明了
只要它们遵循相同的HTML布局模式并且不要求它们具有唯一的ID或类

如果您想了解如何使用列表而不是div来检查这一点：http://jsfiddle.net/MDp5h/4/

HTML：

<div id="nav">
    <div class="Level_1">
        <a href="#">Level_1</a>
        <div class="Level_2"> 
            <a href="#">Level_2</a>
            <div class="Level_3">
                <a href="#">Level_3</a>
            </div>
        </div>
        <div class="Level_2">
            <a href="#">Level_2</a>
            <div class="Level_3">
                <a href="#">Level_3</a>
                <a href="#">Level_3</a>
                <a href="#">Level_3</a>
            </div>
        </div>
    </div>
    <div class="Level_1">
        <a href="#">Level_1</a>
        <div class="Level_2">
            <a href="#">Level_2</a>
            <div class="Level_3">
                <a href="#">Level_3</a>
            </div>
        </div>
        <div class="Level_2">
            <a href="#">Level_2</a>
            <div class="Level_3">
                <a href="#">Level_3</a>
                <a href="#">Level_3</a>
                <a href="#">Level_3</a>
            </div>
        </div>
    </div>
</div>

CSS：

* {
    list-style: none;
    padding: 0;
    margin: 0;
}
#nav div div {
    display:none;
}
#nav a{
    display: block;
}
.Level_1 {
    text-indent: 25px;
    z-index: 1;
    background-color: Red;
}
.Level_2 {
    text-indent: 50px;
    z-index: 2;
    background-color: Green;
}
.Level_3 {
    text-indent: 75px;
    z-index: 3;
    background-color: Blue;
}

jQuery：

$('#nav div a').click(function() {
    if($(this).parent('div').children('div').is(':hidden')) {
        $(this).parent('div').children('div').css('display', 'block');
    } else {
        $(this).parent('div').children('div').css('display', 'none');
    };
});

CSS / jQuery多级列表

2 个答案: