首页 文章

一次只能打开一个手风琴标签

提问于
浏览
4

我的手风琴效果非常好,它在网站上看起来很棒并且可以正常工作 . 但是,我正在尝试为它添加更多JavaScript功能,以使其看起来更专业 .

目前,手风琴允许您一次打开多个面板,即如果我打开一个标签,然后打开另一个标签,则两个标签将同时打开 . 关闭这些面板的唯一方法是重新点击 Headers .

我想要的是一些JavaScript代码,可以防止多个标签一次打开,所以如果我点击一个新面板,它应该首先关闭现有的打开面板 . 这是我的手风琴的HTML代码:

<div class="accordion"><b>Heading 1</b></div>
<div class="panel">
    <p class="text-light">Text 1</p>
</div>
<div class="accordion"><b>Heading 2</b></div>
<div class="panel">
    <p class="text-light">Text 2</p>
</div>

这是我在单独的JavaScript文件中的JavaScript代码,目前允许一次打开多个选项卡

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

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

不确定你是否需要所有的CSS,但是用于显示面板的CSS

div.panel.show {
    display: block !important;
}

希望有人可以提供帮助!提前致谢!

4 回答

  • 1

    为此,您需要在每次单击时将手风琴的状态重置回其原始状态,然后在单击的元素上设置所需的类 . 为此,您可以提取功能,将类名设置为自己的函数,并根据需要调用它 . 试试这个:

    var acc = document.getElementsByClassName("accordion");
    var panel = document.getElementsByClassName('panel');
    
    for (var i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            var setClasses = !this.classList.contains('active');
            setClass(acc, 'active', 'remove');
            setClass(panel, 'show', 'remove');
    
            if (setClasses) {
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
            }
        }
    }
    
    function setClass(els, className, fnName) {
        for (var i = 0; i < els.length; i++) {
            els[i].classList[fnName](className);
        }
    }
    

    Working example

  • 6

    选择一个项目时,您只需要事先隐藏所有项目 .

    var acc = document.getElementsByClassName("accordion");
    var i;
    
    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            hideAll();
    
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
        }
    }
    
    function hideAll() {
        for (i = 0; i < acc.length; i++) {
            acc[i].classList.toggle("active", false);
            acc[i].nextElementSibling.classList.toggle("show", false);
        }
    }
    
  • 0
    var acc = document.getElementsByClassName("accordion");
    var i;
    var last;
    for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            if(last){
                last.classList.toggle("active",false);
                last.nextElementSibling.classList.toggle("show",false);
            }
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
            last=this;
        }
    }
    

    变量last将跟踪最后一个活动的手风琴,因此您不需要再次迭代每个手风琴和面板 .

  • -1

    你必须用手风琴覆盖面板,这样你就可以轻松做到这一点 .

    参考这个

    html
    <div class="accordion"><b>Heading 1</b>
        <div class="panel">
            <p class="text-light">Text 1</p>
        </div>
        </div>
    <div class="accordion"><b>Heading 2</b>
        <div class="panel">
            <p class="text-light">Text 2</p>
        </div>
        </div>
    
    jquery:
    $('.accordion').click(function() {
    $(this).find('.panel').show();
    $(this).siblings().find('.panel').hide();
    
    });
    

    Working example

相关问题