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

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

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

在打开this之前关闭所有内容：

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

＆＃13;

$(".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);   
  }
});

＆＃13;

.active {
  background: gray;
}

＆＃13;

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

＆＃13;

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

1 个答案: