javascript - 如何保持一个 Accordion 选项卡始终打开

标签 javascript jquery

创建了简单的 Accordion ,运行良好。

发现的问题是:如果我打开一个 Accordion 选项卡,如果我单击它,那么它不应该关闭。 如果我打开另一个 Accordion ,那么之前的 Accordion 应该关闭,只有当我再次单击它时,新打开的 Accordion 才应该打开。

这是我尝试过的。 在我的实现中,可以通过同一单击打开和关闭 Accordion 选项卡。

Jquery:

   $('.info').find('.accordion-toggle').click(function () {
       //Expand or collapse this panel
    $(this).toggleClass("open").next().slideToggle('fast');
       //Hide the other panels
    $(".accordion-toggle").not($(this)).removeClass("open");
    $(".accordion-content").not($(this).next()).slideUp('fast');
});

Demo Link

最佳答案

如果单击的 Accordion 具有 class="open",您可以使用以下代码进行条件检查 -

if($(this).attr('class').indexOf('open')==-1)
   $(this).toggleClass("open").next().slideToggle('fast');

<强> Demo

编辑 - 根据Amin的建议,我们可以使用jQuery提供的.hasClass方法,如下所示

if(!$(this).hasClass('open'))   
  $(this).toggleClass("open").next().slideToggle('fast');

<强> Demo with hasClass

关于javascript - 如何保持一个 Accordion 选项卡始终打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25659580/

相关文章:

javascript - 将以下代码从 for 循环转换为 Array#map

javascript - jQuery .click 未触发 TD

javascript - 为什么从多个文件导入时 Firebase 会重新初始化?

javascript - 同源获取导致空比较(HTTP CORS)

javascript - 从 ASP.NET 项目中在新选项卡中打开外部链接

javascript - 阻止 $(this) 元素上的事件

javascript - 如何将 preventDefault 调用传递给其他事件?

javascript - 使用javascript es6从包含唯一id和嵌套数组的多个对象数组中获取通用数据

Javascript/jQuery HD 在 flowplayer 上切换

javascript - 如何使用 Ajax 显示 WordPress 查询