jQuery 切换：当 1 处于活动状态时关闭所有其他选项卡

Question

我正在尝试为此找到解决方案，但我还没有找到修复它的方法。我想在一个选项卡处于活动状态时关闭所有其他选项卡。

/* ------------------------------------------------------------------------ */
/* Toggle
/* ------------------------------------------------------------------------ */
if( $(".toggle .toggle-title").hasClass('active') ){
    $(".toggle .toggle-title.active").closest('.toggle').find('.toggle-inner').show();
}

$(".toggle .toggle-title").click(function(){
    if( $(this).hasClass('active') ){
        $(this).removeClass("active").closest('.toggle').find('.toggle-inner').slideUp(200,'easeOutQuad');
    }
    else{
        $(this).addClass("active").closest('.toggle').find('.toggle-inner').slideDown(200,'easeOutQuad');
    }
});

HTML:

<div class="toggle">
    <div class="toggle-title">
    <i class="fa fa-plus"></i>HEADLINE OF TOGGLE</div>
    <div class="toggle-inner" style="display: none;">
        <p>Lorem ipsum text to show.</p>
    </div>
</div>

有什么解决办法吗？

Answer 1

好吧，我更喜欢重写你的代码，这是你代码的干净版本，现在如果你想：

Close all other tabs when 1 is active

全部关闭，再打开this:

$('.toggle-inner').slideUp(200);

$(".toggle-title").click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
    $(this).siblings('.toggle-inner').slideUp(200);
  } else {   
    $('.toggle-inner').slideUp(200);
    $('.toggle-title').removeClass('active');
    
    /* or use not()
    $('.toggle-inner').not($(this).siblings()).slideUp(200);
    $('.toggle-title').not($(this)).removeClass('active');*/
    
    $(this).addClass('active');
    $(this).siblings('.toggle-inner').slideDown(200);   
  }
});

.active {
  background: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle">
  <div class="toggle-title">
    <i class="fa fa-plus"></i>HEADLINE OF TOGGLE</div>
  <div class="toggle-inner" style="display: none;">
    <p>Lorem ipsum text to show.</p>
  </div>
</div>

<div class="toggle">
  <div class="toggle-title">
    <i class="fa fa-plus"></i>HEADLINE OF TOGGLE</div>
  <div class="toggle-inner" style="display: none;">
    <p>Lorem ipsum text to show.</p>
  </div>
</div>

<div class="toggle">
  <div class="toggle-title">
    <i class="fa fa-plus"></i>HEADLINE OF TOGGLE</div>
  <div class="toggle-inner" style="display: none;">
    <p>Lorem ipsum text to show.</p>
  </div>
</div>

jQuery 切换：当 1 处于活动状态时关闭所有其他选项卡

jQuery Toggle: Close all other tabs when 1 is active

jquery

tabs

toggle