javascript - 使用折叠菜单

Question

我在一个网站上工作，我在页面左侧有一个子菜单。假设以下菜单结构

<div>
    <li class="parent"><a style="cursor: pointer;"><i class="glyphicon glyphicon-book"></i>Parent</a>
        <ul class="child">
            <li><a href="#"><i class="glyphicon glyphicon-folder-close"></i>Child One</a></li>
            <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i>Child Two</a></li>
        </ul>
    </li>
    <li class="parent"><a style="cursor: pointer;"><i class="glyphicon glyphicon-list"></i>Parent</a>
        <ul class="child">
            <li><a href="#"><i class="glyphicon glyphicon-sort-by-alphabet"></i>Child One</a></li>
            <li><a href="#"><i class="glyphicon glyphicon-random"></i>Child Two</a></li>
            <li><a href="#"><i class="glyphicon glyphicon-floppy-disk"></i>Child Three</a></li>
        </ul>
    </li>
</div>

我可以使用 jQuery 毫无问题地折叠菜单。但是，假设用户单击其中一个子链接，我希望仅为该特定父级保持折叠打开状态，而其余折叠关闭。我不知道我将如何实现这一目标。在此先感谢您的帮助。

到目前为止，这是我的 jQuery 代码。

$('.child').hide();
$('.parent').click(function () {
    $(this).find('ul').slideToggle();
});

$('.collapse').on('show', function (e) {
    // hide open menus
    $('.collapse').each(function () {
        if ($(this).hasClass('in')) {
            $(this).collapse('toggle');
        }
    });
});

Answer 1

不要覆盖<a>标签。并附上 <li>在 <ul> 内而不是 <div> .使用这种方式:

$(function () {
  $('.child').hide();
  $('.parent > a').click(function (e) {
    e.preventDefault();
    $(this).next('ul').slideToggle();
  });

  $('.collapse').on('show', function (e) {
    // hide open menus
    $('.collapse').each(function () {
      if ($(this).hasClass('in')) {
        $(this).collapse('toggle');
      }
    });
  });  
});

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<ul>
  <li class="parent"><a href="#"><i class="glyphicon glyphicon-book"></i>Parent</a>
    <ul class="child">
      <li><a href="#"><i class="glyphicon glyphicon-folder-close"></i>Child One</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i>Child Two</a></li>
    </ul>
  </li>
  <li class="parent"><a href="#"><i class="glyphicon glyphicon-list"></i>Parent</a>
    <ul class="child">
      <li><a href="#"><i class="glyphicon glyphicon-sort-by-alphabet"></i>Child One</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-random"></i>Child Two</a></li>
      <li><a href="#"><i class="glyphicon glyphicon-floppy-disk"></i>Child Three</a></li>
    </ul>
  </li>
</ul>