jquery - 有没有更简洁的方法来编写这个 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>

标签： jquery

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;
}

检查这个小提琴

更新

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

删除$('.menu').hide()以根据您的要求使用户切换工作。检查这个更新的小提琴