javascript - 如何将切换功能添加到子孩子在jQuery中

Question

当我尝试向子节点添加切换功能时，什么都没有发生，你能帮帮我吗？

$(document).ready(function() {
  $('label.tree-toggler').click(function() {
    $(this).parent().children('ul.tree').toggle(300);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-list">
  <li><label class="tree-toggler nav-header">WorkLoad</label>
    <ul class="nav nav-list tree">
      <li><label class="tree1">DME Report</label>
        <ul class="tree1">
          <li>
            <a href="search.php">Report1</a>
            <a href="search.php">Report2</a>
          </li>
        </ul>
      </li>
      <li><a href="update.php">CAMB Report</a></li>
      <li><a href="index2.php">LMAB Report</a></li>
      <li><a href="#">DMF Notification</a></li>
      <li><a href="#">LME Forecast Report</a></li>
    </ul>
  </li>
</ul>

标签： javascriptjqueryhtmlcss

Answer 1

这将允许将上述代码简化为：

下面的代码大多按预期工作，...

$(document).ready(function() {
  $('label.tree-toggler, label.tree1').click(function() {
    $(this).parent().children('ul.tree , ul.tree1').toggle(300);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-list">
  <li><label class="tree-toggler nav-header">WorkLoad</label>
    <ul class="nav nav-list tree">
      <li><label class="tree1">DME Report</label>
        <ul class="tree1">
          <li>
            <a href="search.php">Report1</a>
            <a href="search.php">Report2</a>
          </li>
        </ul>
      </li>
      <li><a href="update.php">CAMB Report</a></li>
      <li><a href="index2.php">LMAB Report</a></li>
      <li><a href="#">DMF Notification</a></li>
      <li><a href="#">LME Forecast Report</a></li>
    </ul>
  </li>
</ul>