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

Posted 2023-02-25

【中文标题】滑动切换 |一次只打开一个 div

【英文标题】：Slide Toggle | Open only one div at a time

【发布时间】：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。

【参考方案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>