jQuery切换时隐藏其他下拉列表

Question

我正在使用此jQuery代码片段来切换下拉菜单：

  // Dropdown toggle
  jQuery('.ldropdown-toggle').click(function(){
    jQuery(this).next('.ldropdown').toggle();
  });

我如何更新它，以便当单击一个.ldropdown切换菜单时，所有其他打开的.ldropdown切换菜单都会隐藏。

Answer 1

单击一个项目时隐藏所有ldropdown-toggle元素。并且只显示被单击的项。下面的解决方案说明了上面的情况

​

$('.ldropdown-toggle').on('click', function(){
  $('.ldropdown-toggle ul').not($(this).find('ul')).hide(); 
  $(this).find('ul').toggle();
})

.ldropdown-toggle ul {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left" id="nav">
<ul>
<li class="ldropdown-toggle">
Lighting + Video
  <ul>
   <li>Lighting + Video 1</li>
   <li>Lighting + Video 2</li>
   <li>Lighting + Video 3</li>
   <li>Lighting + Video 4</li>
  </ul>
</li>
<li class="ldropdown-toggle">
Photograms
    <ul>
   <li>Photograms 1</li>
   <li>Photograms 2</li>
   <li>Photograms 3</li>
  </ul>
</li>
<li class="ldropdown-toggle">
About
   <ul>
   <li>About 1</li>
   <li>About 2</li>
   <li>About 3</li>
   <li>About 4</li>
   <li>About 5</li>     
  </ul>
</li></ul>
</div>

​

Answer 2

$('.ldropdown-toggle').click(function(){$('.ldropdown').hide();});

我的代码对你有帮助。