如何定位子導航並一次僅切換一個導航

Question

如何在單擊「HEADER」按鈕（在「此處應該切換ul鏈接」之下）時切換輔助導航鏈接，並且一次只有一個。當用戶點擊按鈕時，它應該關閉其級別的任何其他subnav鏈接，只允許一次打開。它也應該能夠關閉，而不會觸發另一個打開。

<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