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

Question

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

$(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 添加一个特定的 class？

Answer 1

使用 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>

Answer 2

检查 .active class 并减少您的 html 部分。

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

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

$('.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>

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

Slide Toggle | Open only one div at a time

html

jquery

slidetoggle