一次只能打开一个手风琴选项卡

问题描述：

我有一款手感非常好的手风琴，它在网站上看起来不错，而且应该可以正常工作。不过，我正在尝试为其添加更多JavaScript功能，以使其看起来更专业。一次只能打开一个手风琴选项卡

目前，手风琴允许您一次打开多个面板，即如果我打开一个选项卡，然后打开另一个选项卡，两个选项卡将同时打开。关闭这些面板的唯一方法是重新点击标题。

我想要的是一些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文件，该文件目前允许多个选项卡是开放的一次

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"); 
    } 
}

不知道，如果你需要我所有的JavaScript代码的CSS，但继承人的CSS显示面板

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

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

可能的重复[你如何使twitter引导手风琴保持一个组打开]（http://stackoverflow.com/questions/15725717/how-do-you-make-twitter-bootstrap-accordion-keep-one-小组打开） –

只需通过所有这些设置，将它们设置为“不活动”并“隐藏”它们。然后你“激活”并“显示”选定的一个。 – melancia

@NalinAggarwal OP在哪里说他在使用Bootstrap？ –

答

要做到这一点，你需要手风琴的状态重置回其原始状态的每一次点击，您设置的点击元素所需的类之前。要做到这一点，您可以提取功能来将类名设置为各自的功能，并根据需要调用它。试试这个：

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

它的工作原理！非常感谢！对此，我真的非常感激。还有一个我想添加的功能，但是，我不确定它是否可能......当您点击手风琴标题时，我希望页面向下滚动到该手风琴的顶部，以便用户可以看到所有的内容。这是可以做到的吗？再次 - 上面的答案非常感谢！ –

很高兴帮助。你可以通过在click处理程序中添加'document.body.scrollTop = this.offsetTop;'来实现：https：//jsfiddle.net/5h5evjpw/1/ –

嘿！感谢您的快速回复！我尝试了这些代码，并且它做了一些奇怪的事情，当我点击手风琴时，它将开放式手风琴定位在我的页面底部，这样我就可以看到标题，但面板中的文本会从我的屏幕上消失，任何如何解决这个问题的想法？ –

答

选择一个项目时，您只需事先隐藏所有项目。

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); 
    } 
}

答

你必须覆盖手风琴面板，让您可以轻松地做到这一点。

请参阅本

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

OP不使用'jQuery'。 – melancia

答

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; 
    } 
}

变量最后将跟踪最后一个活动手风琴，所以你不需要再重复每一个手风琴和面板。

一次只能打开一个手风琴选项卡

相关推荐