jquery - CSS/jQuery 多级列表

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