有没有更干净的方法来编写此jQuery下拉代码？

Question

我有一个工作正常的jQuery函数（如下）。用于单击事件触发的下拉按钮。我正在寻找一种清理代码并使之更简单的方法。谢谢。

jQuery

$("#dropbtn1").click(function() {
  $(".dropdown-content1").toggleClass("show-dropdown");
  $(".dropdown-content2, .dropdown-content3").removeClass("show-dropdown");

});

$("#dropbtn2").click(function() {
  $(".dropdown-content2").toggleClass("show-dropdown");
  $(".dropdown-content1, .dropdown-content3").removeClass("show-dropdown");

});

$("#dropbtn3").click(function() {
  $(".dropdown-content3").toggleClass("show-dropdown");
  $(".dropdown-content1, .dropdown-content2").removeClass("show-dropdown");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown">
  <li><button id="dropbtn1" type="button">Dropdown</button>
    <div class="menu dropdown-content1">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </li>

  <li><button id="dropbtn2" type="button">Dropdown</button>
    <div class="menu dropdown-content2">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </li>

  <li><button id="dropbtn3" type="button">Dropdown</button>
    <div class="menu dropdown-content3">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </li>

</ul>

Answer 1

向每个下拉按钮添加一个类，并将代码更改为

<ul class="dropdown">
  <li><button id="dropbtn1" type="button" class="drop-btn">Dropdown</button>
    <div class="menu dropdown-content1">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </li>

  <li><button id="dropbtn2" type="button" class="drop-btn">Dropdown</button>
    <div class="menu dropdown-content2">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </li>

  <li><button id="dropbtn3" type="button" class="drop-btn">Dropdown</button>
    <div class="menu dropdown-content3">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </li>

</ul>

然后您可以将js写为

  $(".drop-btn").click (function() {
    $(".menu").hide();
    $(this).siblings('.menu').toggle();
  });

和一点css

.menu{
  display:none;
}

选中此fiddle

更新

  $(".drop-btn").click (function() {
    $(this).siblings('.menu').toggle();
  });

删除$('.menu').hide()，以使用户切换按您的要求工作。选中此UPDATED FIDDLE

Answer 2

点击后，您可以删除所有以“ dropdown-content”开头的类的所有div的“ show-dropdown”类（可能是您添加了所有这些共享的其他类），然后将“ show-dropdown”切换到当前相关的节点。

Answer 3

只需在包含所有按钮的jQuery列表上添加事件侦听器即可。 然后关闭其菜单同级，并打开相关菜单。

$('.dropdown > li > button').click(function() {
  const jSiblingMenus = $(this).siblings('.menu'),
    isAlreadyOpened = jSiblingMenus.css('display') !== 'none';
  
  $('.dropdown > li > .menu').hide();
  
  (isAlreadyOpened) ? jSiblingMenus.hide() : jSiblingMenus.show();
});

.dropdown > li > .menu {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="dropdown">
  <li>
    <button type="button">Dropdown</button>
    
    <div class="menu">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </li>

  <li>
    <button type="button">Dropdown</button>
    
    <div class="menu">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </li>

  <li>
    <button type="button">Dropdown</button>
    
    <div class="menu dropdown-content">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
    </li>
</ul>