jQuery.toggle()实现同一位置仅显示单个div的技术求助

嘿，作为jQuery新手遇到这种切换互斥的问题太正常了，我来帮你搞定它！

首先，你当前的代码有两个小问题：一是每个按钮单独绑定toggle事件，没有处理其他盒子的状态，所以点击第二个按钮时第一个盒子不会自动关闭；二是写了多个$(document).ready()函数，其实完全可以把所有代码放在一个里面，更简洁。

优化后的完整代码 #

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box" id="box1">
    This is Box 1
  </div>
  <div class="box" id="box2">
    This is Box 2
  </div>
</div>
<a href="#" id="button1" class="toggle-btn" data-target="#box1">Box1</a>
<a href="#" id="button2" class="toggle-btn" data-target="#box2">Box2</a>

CSS部分

.container {
  width: 90px;
}
.box {
  display: none;
  padding: 10px; /* 加个内边距让内容更美观 */
}
#box1 {
  background-color: green;
  color: red;
}
#box2 {
  background-color: blue;
  color: yellow;
}

JavaScript部分

$(document).ready(function() {
  $('.toggle-btn').click(function(e) {
    // 阻止a标签默认的跳转行为，避免页面滚到顶部
    e.preventDefault();
    
    // 通过data-target属性获取当前按钮对应的目标盒子
    var targetBox = $(this).data('target');
    
    // 切换目标盒子的显示状态，同时隐藏其他所有兄弟盒子
    $(targetBox).slideToggle(1000).siblings('.box').slideUp(1000);
  });
});

核心思路解释 #

1. 关联按钮与盒子：给所有切换按钮加统一的toggle-btn类，再用data-target属性指定对应的盒子选择器，这样不管你以后加多少个按钮和盒子，都不用修改JS代码，扩展性拉满。
2. 互斥逻辑实现：点击按钮时，先用slideToggle(1000)切换目标盒子的显示/隐藏状态，再通过.siblings('.box')选中所有其他盒子，用slideUp(1000)隐藏它们，保证同一时间最多只有一个盒子显示。
3. 避免默认行为：用e.preventDefault()阻止a标签点击后跳转到页面顶部的默认行为，提升用户体验。

关于你尝试用同一函数无效的问题 #

你之前可能是直接给多个按钮绑定同一个函数，但没有区分对应的目标盒子，比如写成这样：

// 错误示例
$("#button1, #button2").click(function() {
  $("#box1, #box2").toggle(1000);
});

这种写法会导致点击任何按钮都同时切换所有盒子的状态，显然不是你想要的效果。而我们通过data-target属性把按钮和盒子一一对应，再用类选择器绑定通用事件，就能用一个函数搞定所有切换啦！

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