jQuery多点击事件问题：点击不同按钮却打开同一下拉菜单

嘿，我完全懂你现在的困扰——两个按钮点了都弹出同一个下拉框，对吧？核心原因其实很简单：你在HTML里重复使用了同一个ID target，HTML规范里ID必须是页面唯一的，所以jQuery用$('#target')选择元素时，只会找到第一个匹配的那个，自然两个按钮都控制它啦。

别担心，给你两种解决方案，从简单到灵活，你可以选适合自己的：

方案一：快速修复（用唯一ID） #

这个方案最直接，不用改太多代码：

1. 把第二个下拉框的id="target"改成id="target2"
2. 修改jQuery里的toggle2函数，让它控制#target2

修改后的JS代码：

$('.Show').click(function() { $('#target').show(500); $('.Show').hide(0); $('.Hide').show(0); });
$('.Hide').click(function() { $('#target').hide(500); $('.Show').show(0); $('.Hide').hide(0); });
$('.toggle').click(function() { $('#target').slideToggle(1000); });
$('.toggle2').click(function() { $('#target2').slideToggle(1000); });

这个方法适合快速解决问题，但如果以后要加更多下拉菜单，就得一直加新的函数，有点麻烦。

方案二：更灵活的通用写法（推荐） #

我们可以用类选择器+相对定位的方式，让代码一次写好，以后加多少下拉菜单都不用改JS：

第一步：修改HTML，统一类名 #

把所有下拉框的id="target"改成通用类dropdown-content，按钮统一用toggle类（去掉toggle2）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
<style>
body { font-family: 'Lato';font-size: 14px; }
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
<div style="width: 100%; overflow: hidden;">
  <div style="width: 600px; float: left; padding-left:20px; padding-top:50px;">
    <div style="font-size:30px; padding-bottom:20px "> JANUARY 2018 </div>
    <button class="toggle button" style="color:rgb(211, 233, 255)">WEEK 1</button>
    <div class="dropdown-content">
      <div style="list-style-type:none; width:420px; padding-left:20px">
        <li> MONDAY 1ST </li>
        <li> TUESDAY 2ND </li>
        <li> WEDNESDAY 3RD </li>
        <li> THURSDAY 4TH </li>
        <li> FRIDAY 5TH </li>
        <li> SATURDAY 6TH </li>
        <li> SUNDAY 7TH </li>
      </div>
    </div>
  </div>
  <div style="width: 100%; overflow: hidden;">
    <div style="width: 600px; float: left; padding-left:20px; padding-top:50px;">
      <button class="toggle button" style="color:rgb(211, 233, 255)">WEEK 2</button>
      <div class="dropdown-content">
        <div style="list-style-type:none; width:420px; padding-left:20px">
          <li> MONDAY 8TH </li>
          <li> TUESDAY 9TH </li>
          <li> WEDNESDAY 10TH </li>
          <li> THURSDAY 11TH </li>
          <li> FRIDAY 12TH</li>
          <li> SATURDAY 13TH </li>
          <li> SUNDAY 14TH </li>
        </div>
      </div>
    </div>
</body>
</html>

第二步：修改CSS，把#target改成.dropdown-content #

html, body { margin: 0; padding: 0; }
.dropdown-content { 
  width:500px; 
  height:160px; 
  padding:5px; 
  display:none; 
}
.Hide { display:none; }
.button { font-size: 22px; border: none; }

第三步：简化jQuery代码，用相对选择器 #

// 所有toggle按钮共用一个点击事件
$('.toggle').click(function() {
  // $(this)就是当前点击的按钮，next()找它后面紧邻的下拉框
  $(this).next('.dropdown-content').slideToggle(1000);
});

// 如果还要保留Show/Hide按钮的逻辑，也可以用同样的思路
$('.Show').click(function() {
  $(this).next('.dropdown-content').show(500);
  $(this).hide(0);
  $(this).siblings('.Hide').show(0);
});

$('.Hide').click(function() {
  $(this).prev('.dropdown-content').hide(500);
  $(this).hide(0);
  $(this).siblings('.Show').show(0);
});

为什么推荐方案二？ #

1. 符合HTML规范：不用重复ID，避免潜在的bug
2. 代码更简洁：不用为每个按钮写单独的函数，维护起来省心
3. 扩展性强：以后加Week3、Week4，只要复制HTML结构，JS和CSS完全不用改

作为jQuery新手，这种相对选择器的思路很实用，以后处理类似的“按钮对应相邻元素”的场景都能用得上~

内容的提问来源于stack exchange，提问作者Zestria