javascript - 如何定位子导航并一次只切换一个

Question

如何在单击“HEADER”按钮(在“这应该切换 ul 链接”下)后切换二级导航链接，并且一次只能切换一个。当用户单击该按钮时，它应该关闭其级别的任何其他子导航链接，一次只允许打开一个。它还应该能够关闭，而不会触发另一个打开。

  <div class="inner">
  <button data-target="#data-nav-0" data-toggle="collapse" data-state="show" class="list-header major no-style"> <span>HEADER</span> </button>
  <div class="col-wrapper collapse in" id="data-nav-0" style="display: block;">
    <div class="column">
      <ul class="list-unstyled">

        <li class="list-header mobile"><a href="#" class="link">link</a></li>
        <li class="list-header desktop"><a href="#">head</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-0" data-toggle="collapse" data-state="hide">
          <button class="no-style">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
    </div>
    <div class="column">
      <ul class="list-unstyled">
        <li class="list-header desktop"><a href="#">Link</a></li>
        <li class="mobile chevron-right" data-target="#data-inner-0-1" data-toggle="collapse" data-state="hide">
          <button class="no-style">This should toggle the ul links</button>
        </li>

        <ul class="inner collapse" id="data-inner-0-0">
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
          <li><a href="#" class="link">link</a></li>
        </ul>
      </ul>
      </ul>
    </div>
  </div>
</div>

jQuery

$('.list-header').next('div').toggle();
$('.list-header').click(function() {
  $('.list-header').next('div').slideUp();
  $(this).next('div').toggle();
  return false;
});

$('.mobile').next('div').toggle();
$('.mobile').click(function() {
  $('.mobile').next('div').slideUp();
  $(this).next('div').toggle();
  return false;
});

JSFIDDLE:https://jsfiddle.net/jdkwcpva/

Answer 1

这段代码解决了您的问题:

$('.mobile').next('ul').toggle();    // <-- .next('ul') instead of .next('div')
$('.mobile').click(function() {
  $('.mobile').next('ul').slideUp(); // <-- same
  $(this).next('ul').toggle();       // <-- same
  return false;
});

DEMO