jQuery 活動元件上的手風琴手風琴

Question

我有 4 個項目。 默認情況下，第一項處於活動狀態。 當用戶選擇另一個項目時，手風琴應該出現在該項目下方，即活動項目下方。 所有其他手風琴都應該關閉。

<div class="nav-link acti-show-cone active" id="show-cl1"
     style="display: block; cursor: pointer;">
  <div class="rectangle-cust1"></div>
  <div class="move-text-lf accordion" style="display: inline-block;">
    FIRST ITEM
  </div>
  <div class="panel">
    <p>Lorem ipsum...</p>
  </div>
</div>

<div class="nav-link acti-show-ctwo" id="show-cl2"
     style="display: block; cursor: pointer;">
  <div class="rectangle-cust2"></div>
  <div class="move-text-lf accordion" style="display: inline-block;">
    SECOND ITEM
  </div>

  <div class="panel">
    <p>Lorem ipsum.232323232..</p>
  </div>
</div>

這是 jQuery：

var acc = document.getElementsByClassName('accordion');
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener('click', function () {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    console.log('ivan', this);
    //this.classList.toggle("active");
    $('.active').not($(this)).removeClass('active');
    $(this).addClass('active');

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  });
}

這里的問題是，當您打開頁面時，第一個活動項目不顯示它的面板。

下一個更大的問題是切換，現在當你點擊一個項目時它會打開面板，當你再次點擊它時它會關閉。 但是當我單擊另一個項目時它不會關閉。 該面板應該只出現在活動的選定項目上。

JSFIDDLE ，但效果不佳： https://jsfiddle.net/gk489ocm/

我從哪里得到這個想法： https://www.w3schools.com/howto/howto_js_accordion.asp只需要切換顯示在選定的單擊元素上。

Answer 1

這是一個工作更緊湊的 jQuery function：

$('.nav-link').on( "click", function() {
  $('.nav-link').removeClass("active");
  $(this).addClass("active");
  $('.panel').hide();
  $(this).find('.panel').show(); 
});

小提琴： https://jsfiddle.net/Maro94/tmw7agvz/1/