jQuery показать/скрыть аккордеон - закрыть открытый элемент, если открыт

Question

Хорошо, так что это может быть запутанный заголовок, по сути, я сделал функцию показа/скрытия часто задаваемых вопросов, которая закрывает любые открытые элементы, а затем открывает элемент, на который вы просто нажали , Тем не менее, мне нужно, чтобы закрыть этот пункт у вас открыто, если нажать на его названии снова (если это имеет смысл?)

<div class="faq"> 
    <hr /> 
    <h3><a href="#item-1">question 1</a></h3> 
    <div id="item-1" class="items"> 
    answer 1 
    </div> 
    <hr /> 
    <h3><a href="#item-2">question 2</a></h3> 
    <div id="item-2" class="items"> 
    answer 2 
    </div> 
    <hr /> 
    <h3><a href="#item-3">question 3</a></h3> 
    <div id="item-3" class="items"> 
    answer 3 
    </div> 
    <hr /> 
    <h3><a href="#item-4">question 4</a></h3> 
    <div id="item-4" class="items"> 
    answer 4 
    </div> 
</div> 

<script> 
$(document).ready(function(){ 
    $('.faq h3 a:not(.open)').click(function(e){ 
     e.preventDefault(); 
     $(this).addClass('open'); 
     var faq = $.attr(this,'href').substr(1); 
     $('.faq .items').slideUp('fast'); 
     $('.faq #'+faq).slideDown('fast',function(){ 
      $('html,body').animate({scrollTop:$('[id="'+faq+'"]').offset().top-60},750); 
     }); 
    }); 
    $('.faq h3 a.open').click(function(e){ 
     e.preventDefault(); 
     $('.faq .items').slideUp('fast'); 
     $(this).removeClass('open'); 
    }); 
}); 
</script> 

Так что, если я нажал на вопрос 3, она открывается, и если я нажимаю на он снова, он закрывается. Но если я нажму на вопрос 2, он закрывает вопрос 3 и открывает вопрос 2.

Я попытался добавить открытый класс, но он игнорирует его.

Answer 1

В настоящее время то, что вы используете, называется «прямой» привязкой, которая будет прикрепляться только к элементу, существующему на странице, в момент, когда ваш код вызывает привязку к событию.

Использование метода .on() с использованием подхода Event Delegation при манипуляционном селекторе (например, удаление и добавление классов).

$('.faq h3').on('click', 'a:not(.open)', function(e){ 
    e.preventDefault(); 
    $(this).addClass('open'); 
    var faq = $.attr(this,'href').substr(1); 
    $('.faq .items').slideUp('fast'); 
    $('.faq #'+faq).slideDown('fast',function(){ 
     $('html,body').animate({scrollTop:$('[id="'+faq+'"]').offset().top-60},750); 
    }); 
}); 
$('.faq h3').on('click', 'a.open', function(e){ 
    e.preventDefault(); 
    $('.faq .items').slideUp('fast'); 
    $(this).removeClass('open'); 
}); 

---

Однако вы можете упростить ваш код, как

$(document).ready(function() { 
 
    $('.faq h3 a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var nextItem = $(this).parent().next('.items'); 
 
    $('.faq .items').not(nextItem).slideUp('fast'); 
 
    nextItem.slideDown('fast', function() { 
 
     if (nextItem.is(':visible')) { 
 
     $('html,body').animate({ 
 
      scrollTop: nextItem.offset().top - 60 
 
     }, 750); 
 
     } 
 
    }); 
 
    }); 
 
});

.items { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="faq"> 
 
    <hr /> 
 
    <h3><a href="#item-1">question 1</a></h3> 
 
    <div id="item-1" class="items"> 
 
    answer 1 
 
    </div> 
 
    <hr /> 
 
    <h3><a href="#item-2">question 2</a></h3> 
 
    <div id="item-2" class="items"> 
 
    answer 2 
 
    </div> 
 
    <hr /> 
 
    <h3><a href="#item-3">question 3</a></h3> 
 
    <div id="item-3" class="items"> 
 
    answer 3 
 
    </div> 
 
    <hr /> 
 
    <h3><a href="#item-4">question 4</a></h3> 
 
    <div id="item-4" class="items"> 
 
    answer 4 
 
    </div> 
 
</div>

Answer 2

Попробуйте этот код может быть полезным:

JQuery код:

$(document).ready(function(){ 
    $('.item h3').click(function(){ 
     $(this).siblings('.items').slideToggle(); 
    }) 
}); 

HMTL разметки:

<div class="faq"> 
     <hr /> 
     <div class="item"> 
      <h3><a href="#item-1">question 1</a></h3> 
      <div id="item-1" class="items"> 
       answer 1 
      </div> 
      <hr /> 
     </div> 
     <div class="item"> 
      <h3><a href="#item-2">question 2</a></h3> 
      <div id="item-2" class="items"> 
       answer 2 
      </div> 
      <hr /> 
     </div> 
     <div class="item"> 
      <h3><a href="#item-3">question 3</a></h3> 
      <div id="item-3" class="items"> 
       answer 3 
      </div> 
      <hr /> 
     </div> 
     <div class="item"> 
      <h3><a href="#item-4">question 4</a></h3> 
      <div id="item-4" class="items"> 
       answer 4 
      </div> 
     </div> 
    </div>