滑动切换 |一次只打开一个 div答案

【问题标题】：Slide Toggle | Open only one div at a time滑动切换 |一次只打开一个 div
【发布时间】：2021-05-14 18:26:39
【问题描述】：

我有一些可折叠的 div，当点击标题时，它们会打开或关闭。问题是单击其中一个，也会打开所有其他的，关闭它们时也会发生同样的情况。代码如下：

$(document).on("click", ".toggle-title", function(evt) {
  $(this).parent().find('.toggle-content').slideToggle(600);
  $(this).find('i').toggleClass('rotate-toggle');
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="toggle-title">
  <p class="title_celeste">EN TRÁNSITO <i class="fa fa-angle-down font18"></i></p>
</a>
<div class="toggle-content">
  CONTENIDO
</div>

<a class="toggle-title">
  <p class="title_celeste">PORTERÍA <i class="fa fa-angle-down font18"></i></p>
</a>
<div class="toggle-content">
  CONTENIDO
</div>

<a class="toggle-title">
  <p class="title_celeste">CALADO <i class="fa fa-angle-down font18"></i></p>
</a>
<div class="toggle-content">
  CONTENIDO
</div>

我的问题是：有没有办法一次单击打开一个 div 而不必为每个 div 添加特定的类？

【问题讨论】：

尝试$(this).closest('.toggle-content') 查找当前标题的开头内容元素
旁注，您不能在段落周围环绕锚点。无效的 HTML
对我的首字母进行了一些编辑，以便您可以在 jQuery 中看到正确的 slideToggle。

标签： html jquery slidetoggle

【解决方案1】：

检查.active 类并减少html 部分。

根据标题的状态实现slideDown() 和slideUp()。

如果您确实需要使用 <a> 标签，请考虑将它们移到您的 <p> 标签内，如上面的 cmets 所述。

$('.title_celeste').on("click", function(evt) {
  evt.preventDefault();
  
  let _this = $(this),
      ct = _this.next('.toggle-content');
  
  // check if clicked title has active class
  if(_this.hasClass('active')){
  
    _this.removeClass('active');
    ct.slideUp();
    
  } else {
    $('.title_celeste.active').removeClass('active');
    $('.toggle-content').slideUp();
    _this.addClass('active');
    ct.slideDown();
    
  }

});

.toggle-content {
  display: none;
  padding:  2rem 1rem;
  background: #f1f1f1;
}

.title_celeste {
  background: #111;
  color: #fff;
  padding: 1rem;
  cursor: pointer;
  margin: 0;
}

.title_celeste.active {
  background: red;
}

.title_celeste:not(.active):hover {
  background: green;
}

.title_celeste i {
   transition: transform .3s ease;
   float: right;
}

.title_celeste.active i {
  transform: rotate(-180deg)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<p class="title_celeste">EN TRÁNSITO <i class="fa fa-angle-down font18"></i></p>

<div class="toggle-content">
  CONTENIDO
</div>

<p class="title_celeste">PORTERÍA <i class="fa fa-angle-down font18"></i></p>

<div class="toggle-content">
  CONTENIDO
</div>


  <p class="title_celeste">CALADO <i class="fa fa-angle-down font18"></i></p>

<div class="toggle-content">
  CONTENIDO
</div>

【讨论】：

【解决方案2】：

使用 slideUp 和 slideDown 而不是 slideToggle。

$('.toggle-title').click(function(event) {
    event.preventDefault();
    $('.toggle-content').slideUp();
    $(this).next('.toggle-content').slideDown();
});

.toggle-content {
    height: auto;
    width: 100%;
    display: none;
    margin: 0;
}
.toggle-title, .toggle-title p {
    margin: 0;
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="toggle-title">
  <p class="title_celeste">EN TRÁNSITO <i class="fa fa-angle-down font18"></i></p>
</a>
<div class="toggle-content">
  CONTENIDO
</div>

<a class="toggle-title">
  <p class="title_celeste">PORTERÍA <i class="fa fa-angle-down font18"></i></p>
</a>
<div class="toggle-content">
  CONTENIDO
</div>

<a class="toggle-title">
  <p class="title_celeste">CALADO <i class="fa fa-angle-down font18"></i></p>
</a>
<div class="toggle-content">
  CONTENIDO
</div>

【讨论】：