如何用jQuery的.is(':visible')实现点击显示单一手风琴面板并隐藏其他？

嗨Laura！我来帮你搞定这个手风琴组件的问题～ 你想要的「同一时间只显示一个文本区块」的效果其实很容易实现，咱们一步步来：

首先，先确认你的HTML结构大概是这样的（如果不一样，只要调整选择器就行）：

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">标题1</h3>
    <div class="accordion-content">这里是标题1对应的内容啦～</div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">标题2</h3>
    <div class="accordion-content">标题2的内容在这里！</div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">标题3</h3>
    <div class="accordion-content">标题3的内容也来凑热闹～</div>
  </div>
</div>

然后先写点基础CSS，把默认的内容区块隐藏起来：

.accordion-content {
  display: none;
  /* 可以加一些样式让它更美观 */
  padding: 10px;
  border: 1px solid #eee;
  border-top: none;
}

接下来就是核心的jQuery代码啦，分两种场景给你：

场景1：点击已展开的标题可以收起它（允许全部隐藏） #

这种方案下，点击隐藏的标题会展开它并关闭其他所有；点击已展开的标题会收起它，最终可能没有任何区块展开：

$(document).ready(function() {
  // 给所有标题绑定点击事件
  $('.accordion-header').click(function() {
    // 找到当前标题对应的内容区块
    const currentContent = $(this).next('.accordion-content');
    
    // 隐藏除了当前内容之外的所有内容区块
    $('.accordion-content').not(currentContent).hide();
    
    // 切换当前内容的显示状态（隐藏→显示，显示→隐藏）
    currentContent.toggle();
  });
});

场景2：始终最多只有一个区块展开（点击已展开的标题无变化） #

如果你希望点击已经展开的标题时，它保持展开状态不会收起，那可以用到你提到的is(':visible')方法来判断：

$(document).ready(function() {
  $('.accordion-header').click(function() {
    const currentContent = $(this).next('.accordion-content');
    
    // 只有当当前内容是隐藏状态时，才执行关闭其他+展开当前
    if (!currentContent.is(':visible')) {
      // 先把所有内容都隐藏
      $('.accordion-content').hide();
      // 再显示当前的内容
      currentContent.show();
    }
  });
});

额外优化：给展开的区块加样式 #

如果想给展开的内容加个特殊样式（比如背景色），可以给它加个active类：

$(document).ready(function() {
  $('.accordion-header').click(function() {
    const currentContent = $(this).next('.accordion-content');
    
    if (!currentContent.is(':visible')) {
      // 移除所有内容的active类并隐藏
      $('.accordion-content').removeClass('active').hide();
      // 给当前内容添加active类并显示
      currentContent.addClass('active').show();
    }
  });
});

对应的CSS补充：

.accordion-content.active {
  background-color: #f5f5f5;
}

这样你的手风琴组件就完全符合需求啦～ 要是你的HTML结构和我示例的不一样，只要调整选择器（比如把.accordion-header换成你实际用的类名）就可以了！

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