Question

我希望隐藏每个父母来自班级"ul-menu"，但是我写的代码只隐藏第一个隐藏的ul。

我想在页面加载时隐藏span的父级中的每个菜单ul，但是这只隐藏了ul号码1我检查了这个，如果我从ul号码1中移除"ul-menu"然后删除ul号码2是隐藏，但我想隐藏每一个ul。我尝试了每个功能，但这没有帮助。或者我可以在隐藏的ul级别上面隐藏ul吗？

＆＃13;

$('.ul-menu').on("click", function() {
  var t = $(this);
  t.parent().find('ul').toggle();
  if (t.hasClass('glyphicon-chevron-down')) {
    t.removeClass('glyphicon-chevron-down');
    t.addClass('glyphicon-chevron-right');
  } else {
    t.addClass('glyphicon-chevron-down');
    t.removeClass('glyphicon-chevron-right');
  }
});

//Hiding function
$(document).ready(function() {
  $('.ul-menu').parent().find('ul').hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-menu well" id="pages">
  <header>Sites</header>
  <ul id="starter">

    <li>
      <span class="glyphicon glyphicon-record"></span> 
      <a href="?page=pages/About">About</a>
    </li>
    <li>
      <span class="glyphicon ul-menu glyphicon-chevron-down"></span> 
      <a href="?page=pages/courses">Courses</a>
      <ul>
        <!-- Ul to hide number 1 -->
        <li>
          <span class="glyphicon ul-menu glyphicon-chevron-down"></span> 
          <a href="?page=pages/courses/topic_1">Topic 1</a>
          <ul>
            <!-- Ul to hide number 2 -->
            <li>
              <span class="glyphicon glyphicon-record"></span> 
              <a href="?page=pages/courses/topic_1/sub_topic_1">Sub Topic 1</a>
            </li>
          </ul>
        </li>
        <li>
          <span class="glyphicon glyphicon-record"></span> 
          <a href="?page=pages/courses/topic_2">Topic 2</a>
        </li>
      </ul>
    </li>
    <li>
      <span class="glyphicon glyphicon-record"></span> 
      <a href="?page=pages/main">Main</a>
    </li>
  </ul>
</div>
<!-- Menu-->

＆＃13;

Answer 1

我相信您的问题出在您的切换节目中。

t.parent().find('ul').toggle();

这将找到所有孩子并切换它们。要立即找到＆＃39;＆gt; UL＆＃39;代替。

Answer 2

您应该只定位同级ul元素

$('.ul-menu').on("click", function () {
    var t = $(this);
    t.nextAll('ul').toggle();
    t.toggleClass('glyphicon-chevron-down glyphicon-chevron-right')
});

演示：Fiddle

隐藏列表中的隐藏列表

2 个答案: