Question

我试图在没有实际使用插件的情况下尝试手风琴类型菜单。我在这里有一个jsfiddle：https://jsfiddle.net/t7mafd2a/1/

我可以切换菜单，但我想要的是当一个打开另一个关闭时，不要让它们在点击时保持打开状态。

＆＃13;

    $('.navContainer li div').click(function (e) {
        e.preventDefault();
        var $t = $(this);
    
        $t.next('.navtoggle').toggleClass('active', 400);
    
    });

＆＃13;

    .navtoggle { display: none; }
    
    .active { display: block; } .navContainer { display: block; } ul, li { list-style: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navContainer">   
     <ul>
      <li>
      <div>Category 1</div>
      <ul class="navtoggle">
        <li><a href="http//www.google.com">Test</a></li>
        <li><a href="http//www.google.com">Test</a></li>
      </ul>
      <div>Category 2</div>
      <ul class="navtoggle">
        <li><a href="http//www.google.com">Test</a></li>
      </ul>
      <div>Category 3</div>
      <ul class="navtoggle">
        <li><a href="http//www.google.com">Test</a></li>
      </ul>
     </li>   
    </ul>
    </div>

＆＃13;

Answer 1

只需在执行toggleClass

之前添加此行

$('.navtoggle').removeClass('active');

在您打开刚刚点击的元素之前，这将删除所有active元素中的navtoggle类。

完整代码：

$('.navContainer li div').click(function(e) {
  e.preventDefault();
  var $t = $(this);
  var $next = $t.next('.navtoggle');
  $('.navtoggle').not($next).removeClass('active');
  $next.toggleClass('active', 400);
});

Answer 2

$('.navContainer li div').click(function (e) {
e.preventDefault(); 
 $('ul.active').removeClass('active');
var $t = $(this);
$t.next('.navtoggle').toggleClass('active', 400);
});

.navtoggle { display: none; }

.active { display: block; } .navContainer { display: block; } ul, li { list-style: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navContainer">   
 <ul>
  <li>
  <div>Category 1</div>
  <ul class="navtoggle">
    <li><a href="http//www.google.com">Test</a></li>
    <li><a href="http//www.google.com">Test</a></li>
  </ul>
  <div>Category 2</div>
  <ul class="navtoggle">
    <li><a href="http//www.google.com">Test</a></li>
  </ul>
  <div>Category 3</div>
  <ul class="navtoggle">
    <li><a href="http//www.google.com">Test</a></li>
  </ul>
 </li>   
</ul>
</div>

手风琴类型菜单，关闭除选定的一个以外的所有div

2 个答案: