jQuery在活动元素上切换手风琴答案

【问题标题】：jQuery toggle accordion on active elementjQuery在活动元素上切换手风琴
【发布时间】：2020-05-27 16:39:19
【问题描述】：

我有 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 只需要切换显示在选定的单击元素上。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这是一个工作且更紧凑的 jQuery 函数：

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

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

【讨论】：