一次只能打開一個手風琴選項卡

我有一款手感非常好的手風琴，它在網站上看起來不錯，而且應該可以正常工作。不過，我正在嘗試爲其添加更多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; 
}

希望有人可以幫助！提前致謝！

來源

2016-06-10 Usman Zafar

可能的重複[你如何使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

來源

2016-06-10 10:19:55

它的工作原理！非常感謝！對此，我真的非常感激。還有一個我想添加的功能，但是，我不確定它是否可能......當您點擊手風琴標題時，我希望頁面向下滾動到該手風琴的頂部，以便用戶可以看到所有的內容。這是可以做到的嗎？再次 - 上面的答案非常感謝！ –

很高興幫助。你可以通過在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); 
    } 
}

來源

2016-06-10 10:19:52 melancia

-2

你必須覆蓋手風琴面板，讓您可以輕鬆地做到這一點。

請參閱本

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

來源

2016-06-10 10:22:50 Maharajan

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

變量最後將跟蹤最後一個活動手風琴，所以你不需要再重複每一個手風琴和麪板。

來源

2017-03-21 08:50:08 Colin

一次只能打開一個手風琴選項卡

回答

相關問題