Question

我正在尝试创建嵌套的可展开和折叠标签。我能够实现第一级。即如果我点击key1，它将展开列表。

然而，对于键5，当我点击它时，第二级和第三级都会扩展。有没有办法当我点击键5时，只有第二级会扩展。

有没有更好的方法来创建嵌套的展开和可折叠数据？

https://jsfiddle.net/charles30hk/8ykLdnox/

HTML代码：

<ul class="archive_0">
  <li class="level_0">key1
    <ul class="archive_1">
      <li class="level_1">key11     value11</li>
      <li class="level_1">key12     value12</li>
    </ul></li><li class="level_0">key2     value2</li>
    <li class="level_0">key3     value3</li>
    <li class="level_0">key4     value3</li>
    <li class="level_0">key5
      <ul class="archive_1">
        <li class="level_1">key51     value11</li>
        <li class="level_1">key52     value12</li>
        <li class="level_1">key53<ul class="archive_2">
          <li class="level_2">key531     value</li>
          <li class="level_2">key52     value12</li>
        </ul>
      </li>
    </ul>
  </li>
 </ul>

JS：

$('.archive_0 ul').hide();

$('.level_0').click(function() {
    //$(this).parent().find('ul').slideToggle();
    $(this).find('ul').slideToggle();
});


$('.archive_1 ul').hide();

$('.level_1').click(function() {
    $(this).find('ul').slideToggle();
});

$('.archive_2 ul').hide();

$('.level_2').click(function() {
    $(this).find('ul').slideToggle();
});

$('.archive_3 ul').hide();

$('.level_3').click(function() {
    $(this).find('ul').slideToggle();
});

Answer 1

你的问题是你的level_1函数找到所有的孩子并扩展所有孩子，改变你的选择器只获得第一级孩子：

$('.level_0').click(function() {
    $(this).find(' > ul').slideToggle();
});

当您单击子元素时，您还需要停止传播到父元素的click事件（因为子元素在父元素内，单击子元素也会单击父元素）。要停止传播，请执行以下操作：

$('.level_1').click(function(ev) {
    ev.stopPropagation();
    $(this).find('ul').slideToggle();
});

Answer 2

使用.children('ul:eq(0)').toggle()和e.stopPropagation()。您是单独隐藏每个ul，只能$('.archive_0 ul').hide()。

$('.archive_0 ul').hide();
$('li').on('click', function(e){
    $(this).children('ul:eq(0)').toggle();
    e.stopPropagation();
})

$('.archive_0 ul').hide();
$('li').on('click', function(e) {
  $(this).children('ul:eq(0)').toggle();
  e.stopPropagation();
})

#level_1,
#level_2,
#level_3 {
  cursor: pointer;
}
.archive_0 {
  margin-left: 1em;
  font-size: large;
  font-weight: bold;
  cursor: pointer;
}
.archive_1 {
  margin-left: 1em;
  margin-top: 0;
  margin-bottom: 1em;
  list-style-type: circle;
  font-size: medium;
  cursor: pointer;
}
.archive_2 {
  margin-left: 1em;
  margin-top: 0;
  margin-bottom: 1em;
  list-style: square url('http://www.webbossuk.com/admin/images/reply-arrow.png');
  font-weight: normal;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="archive_0">
  <li class="level_0">key1
    <ul class="archive_1">
      <li class="level_1">key11 value11</li>
      <li class="level_1">key12 value12</li>
    </ul>
  </li>
  <li class="level_0">key2 value2</li>
  <li class="level_0">key3 value3</li>
  <li class="level_0">key4 value3</li>
  <li class="level_0">key5
    <ul class="archive_1">
      <li class="level_1">key51 value11</li>
      <li class="level_1">key52 value12</li>
      <li class="level_1">key53
        <ul class="archive_2">
          <li class="level_2">key531 value</li>
          <li class="level_2">key52 value12</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 3

使用一些css和多个选择器调用实际上可以大大简化代码：

<强> CSS

.archive_1, .archive_2, .archive_3 {display: none}

<强>的jQuery

$('.level_0, .level_1, .level_2, .level_3').click(function(e) {
    e.stopPropagation();
    $(this).children('ul').slideToggle();
});

Updated fiddle here

此处的关键是，其他答案提及e.stopPropogation() - a good read

Answer 4

您可以使用:first选择器选择第一个孩子。

此外，您应该使用event.stopImmediatePropagation()。点击孩子ul也会点击父ul点击。

以下是样本：

Updated Fiddle

$('.archive_0 ul, .archive_1 ul, .archive_2 ul .archive_2 ul').hide();

$('.level_0,.level_1,.level_2,.level_3').on("click", function(e) {
  $(this).find('ul:first').slideToggle();
  e.stopImmediatePropagation()
});

#level_1,
#level_2,
#level_3 {
  cursor: pointer;
}
.archive_0 {
  margin-left: 1em;
  font-size: large;
  font-weight: bold;
  cursor: pointer;
}
.archive_1 {
  margin-left: 1em;
  margin-top: 0;
  margin-bottom: 1em;
  list-style-type: circle;
  font-size: medium;
  cursor: pointer;
}
.archive_2 {
  margin-left: 1em;
  margin-top: 0;
  margin-bottom: 1em;
  list-style: square url('http://www.webbossuk.com/admin/images/reply-arrow.png');
  font-weight: normal;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="archive_0">
  <li class="level_0">key1
    <ul class="archive_1">
      <li class="level_1">key11 value11</li>
      <li class="level_1">key12 value12</li>
    </ul>
  </li>
  <li class="level_0">key2 value2</li>
  <li class="level_0">key3 value3</li>
  <li class="level_0">key4 value3</li>
  <li class="level_0">key5
    <ul class="archive_1">
      <li class="level_1">key51 value11</li>
      <li class="level_1">key52 value12</li>
      <li class="level_1">key53
        <ul class="archive_2">
          <li class="level_2">key531 value</li>
          <li class="level_2">key52 value12</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 5

尝试此操作时，点击.archive_2，

时会隐藏.level_0

$(document).ready(function(){
$(".level_0 > .archive_1").hide();
$(".level_0").click(function(){
    $(this).find(".archive_2").hide();
    $(this).find(".archive_1").slideToggle();
});
});

多嵌套展开和折叠

5 个答案: