如何仅通过单击打开和折叠相同的 JQuery 手风琴 [英] How to open and collapse the same JQuery accordion with click on it only

查看：19
本文介绍了如何仅通过单击打开和折叠相同的 JQuery 手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

尝试打开手风琴并仅在单击时折叠.我可以打开/折叠它，但是当点击另一个手风琴时它会也关闭.

它应该自己打开或关闭 - 独立于其他手风琴.

这是我试过的.

JS:

$(document).on("click", ".accordion-toggle", function () {if ($(this).attr('class').indexOf('open') == -1)$(this).toggleClass("open").next().slideToggle('fast');//隐藏其他面板$(".accordion-toggle").not($(this)).removeClass("open");$(".accordion-content").not($(this).next()).slideUp('fast');});

小提琴:演示

解决方案

我用一些 css 创建了一个新的小提琴...

HTML

<a href="#" class="accordion-toggle">标题 1</a><div class="accordion-content">内容一

<div class="accordion-container"><a href="#" class="accordion-toggle">标题 2</a><div class="accordion-content">内容二

<div class="accordion-container"><a href="#" class="accordion-toggle">标题 3</a><div class="accordion-content">内容三

JS

$(document).ready(function () {$('.accordion-toggle').on('click', function(event){event.preventDefault();//创建手风琴变量var 手风琴 = $(this);var 手风琴内容 = 手风琴.next('.accordion-content');//切换手风琴链接打开类手风琴.toggleClass("打开");//切换手风琴内容手风琴Content.slideToggle(250);});});

请检查这个fiddle

Trying to get the accordion open and collapse only when it's being clicked. I am able to open/collapse it but it is getting closed also when another accordion is clicked.

It should open or close on its own - independently from other accordions.

This is what I have tried.

JS:

$(document).on("click", ".accordion-toggle", function () {
        if ($(this).attr('class').indexOf('open') == -1)
   $(this).toggleClass("open").next().slideToggle('fast');
        //Hide the other panels
        $(".accordion-toggle").not($(this)).removeClass("open");
        $(".accordion-content").not($(this).next()).slideUp('fast');
    });

Fiddle: Demo

解决方案

I have created a new fiddle with some css...

HTML

<div class="accordion-container">
    <a href="#" class="accordion-toggle">Heading 1</a>
    <div class="accordion-content">
        Content 1
    </div>
</div>
<div class="accordion-container">
    <a href="#" class="accordion-toggle">Heading 2</a>
    <div class="accordion-content">
        Content 2
    </div>
</div>
<div class="accordion-container">
    <a href="#" class="accordion-toggle">Heading 3</a>
    <div class="accordion-content">
        Content 3
    </div>
</div>

JS

$(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
        event.preventDefault();
        // create accordion variables
        var accordion = $(this);
        var accordionContent = accordion.next('.accordion-content');

        // toggle accordion link open class
        accordion.toggleClass("open");
        // toggle accordion content
        accordionContent.slideToggle(250);

    });
});

please check this fiddle

这篇关于如何仅通过单击打开和折叠相同的 JQuery 手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆