多个手风琴同时打开。如何一次只打开 1 个 JQuery 手风琴

Question

当前打开的手风琴在另一个打开时不会关闭。

这是我用的代码，不知道哪里错了。

<script>
$(document).ready(function () {

//each accordion has a text entry and a corresponding image     
  var accordionEntries = document.querySelectorAll('.accordion-entry');
  var accordionImages = document.querySelectorAll('.accordion-image'); 
  
    for ( var i = 0; i < accordionEntries.length; i++ ) {
    accordionEntries[i].dataset.target = 'accordion-image-' + i;
    accordionImages[i].classList.add('accordion-image-' + i);
  }
  

//toggles accordion open state    
  $(document).on('click', '.accordion-header', function () {
    if ($(this).is(".accordion-open")) return $(this).removeClass("accordion-open");
    var parent = $(this).closest('.accordion-entry, .accordion-image');
    if(!parent.hasClass('.accordion-open')){
        parent.toggleClass('accordion-open');
      } else {
$('.accordion-open').removeClass('accordion-open')
}
    $('.' + parent.data('target')).toggleClass('accordion-open')
    
  })

})
</script>

Answer 1

感谢大家帮忙解答问题，终于有同事帮我解决了这个问题。这是 cmets 的解决方案，对其他任何人都有好处。

<script>
$(document).ready(function () { 
  var accordionEntries = document.querySelectorAll('.accordion-entry');
  var accordionImages = document.querySelectorAll('.accordion-image');
  
    for ( var i = 0; i < accordionEntries.length; i++ ) {
    accordionEntries[i].dataset.target = 'accordion-image-' + i;
    accordionImages[i].classList.add('accordion-image-' + i);
  }
      
  $(document).on('click', '.accordion-header', function () {
    // close currently opened accordion
    // add class to open clicked accordion  
    var accordionEntry = $(this).closest('.accordion-entry');
    var open = 'accordion-open';
    
    /* If the accordion that was clicked is in open state, 
    *  remove all occurrences of the 'accordion-open' class and DO NOTHING 
    *  AFTER.
    */
    if (accordionEntry.hasClass('accordion-open')) {
            accordionEntry.removeClass(open);
        $('.' + open).removeClass(open);
    } else {
        /* If the accordion that was clicked is NOT in open state, 
        *  remove all occurrences of the 'accordion-open' class and add 'accordion-open' class
        *. to the accordion that was clicked.
        */
        accordionEntry.removeClass(open);
                $('.'+ open).removeClass(open);
        accordionEntry.addClass('accordion-open');
        $('.'+ accordionEntry.data['target']).addClass(open)
          $('.'+ accordionEntry[0].dataset.target).addClass(open)
    } 
    });
}); 
</script>