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>

使用折叠菜单

1 个答案: