JQuery Toggle: закройте все остальные вкладки, когда 1 активен - PullRequest
Новая
       9

JQuery Toggle: закройте все остальные вкладки, когда 1 активен

0 голосов
/ 09 июня 2018

Я пытаюсь найти решение для этого, но я еще не нашел способ исправить это.Я хотел бы закрыть все остальные вкладки, когда активна одна вкладка. 

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

Есть идеи, как это исправить?

1 Ответ

0 голосов
/ 09 июня 2018

Хорошо, я предпочитаю переписывать ваш код, вот чистая версия вашего кода, теперь, если вы хотите:

Закройте все остальные вкладки, когда активна 1

Просто закройте все, прежде чем открыть 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>
...