我相信我很接近。然而,我的开关在水平方向上工作得很好,而不是在垂直方向上。当我的切换是垂直的时,切换的信息只能在第三个切换下看到,而不是直接在其分配的切换标题下(希望这是有道理的 - 在编码中看到)我似乎也无法为切换添加可调节的高度,我'试过无数种方法都没有用。我想让高度成为内容的高度。任何帮助将不胜感激。
var divs = ["Soft", "Broch", "tut"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
a{
display: block;
}
<a href="#" onclick="toggleVisibility('Soft');">soft</a>
<a href="#" onclick="toggleVisibility('Broch');">broch</a>
<a href="#" onclick="toggleVisibility('tut');">tut</a>
<div id="Soft" style="display: none;">Soft div</div>
<div id="Broch" style="display: none;">broch div</div>
<div id="tut" style="display: none;">tut div</div>
切换功能工作正常。按一个切换其他是不活动的。任何建议都将非常有帮助
最佳答案
仅仅改变 dom 中的顺序还不够吗?
<a href="#" onclick="toggleVisibility('Soft');">soft</a>
<div id="Soft" style="display: none;">Soft div</div>
<a href="#" onclick="toggleVisibility('Broch');">broch</a>
<div id="Broch" style="display: none;">broch div</div>
<a href="#" onclick="toggleVisibility('tut');">tut</a>
<div id="tut" style="display: none;">tut div</div>
关于javascript - 创建具有高度调整的垂直切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32740153/