jQuery常见问题解答折叠键一次只能打开一个

，这是一个常见的需求，可以通过使用jQuery的事件处理函数和CSS样式来实现。

首先，我们需要给折叠键添加一个点击事件，当点击折叠键时，展开或折叠对应的内容。可以使用jQuery的click()方法来绑定点击事件。

$('.collapse-btn').click(function() {
  // 切换展开/折叠状态
  $(this).toggleClass('active');
  
  // 获取对应的内容区域
  var content = $(this).next('.collapse-content');
  
  // 判断内容区域的显示状态
  if (content.is(':visible')) {
    // 如果内容区域已经显示，则折叠起来
    content.slideUp();
  } else {
    // 如果内容区域已经折叠，则展开
    content.slideDown();
  }
});

上述代码中，.collapse-btn是折叠键的类名，.collapse-content是对应的内容区域的类名。当点击折叠键时，通过toggleClass()方法切换折叠键的状态，然后使用next()方法获取下一个兄弟元素，即内容区域。接着，使用is(':visible')方法判断内容区域是否可见，如果可见则使用slideUp()方法折叠起来，否则使用slideDown()方法展开。

为了实现一次只能打开一个折叠内容的效果，我们可以在点击事件中添加一些逻辑。首先，将所有的内容区域折叠起来，然后展开当前点击的折叠键对应的内容区域。

$('.collapse-btn').click(function() {
  // 切换展开/折叠状态
  $(this).toggleClass('active');
  
  // 获取对应的内容区域
  var content = $(this).next('.collapse-content');
  
  // 判断内容区域的显示状态
  if (content.is(':visible')) {
    // 如果内容区域已经显示，则折叠起来
    content.slideUp();
  } else {
    // 如果内容区域已经折叠，则展开
    content.slideDown();
    
    // 折叠其他已展开的内容区域
    $('.collapse-btn').not(this).removeClass('active').next('.collapse-content').slideUp();
  }
});

上述代码中，我们使用not()方法来排除当前点击的折叠键，然后使用removeClass()方法移除其他折叠键的激活状态，最后使用slideUp()方法折叠其他内容区域。

这样，就实现了一次只能打开一个折叠内容的效果。

推荐的腾讯云相关产品：无

参考链接：