如何觸發切換？我有兩個 Toogle，每次只需要顯示一個。單擊一次切換按鈕時，兩個容器會在另一個容器下方打開一個容器，但我希望第一個切換容器變得不活動或折疊，而第二個容器處于活動狀態，但在同一位置，而不是一個在另一個容器下方。例如單擊“打開 1”--> div berlin 展開單擊“打開 2”--> div berlin 折疊和 div zurich 展開ETC...我的HTML：<div class="toggle"><button onclick="male()">open 1</button><button onclick="female()">open 2</button></div><div id="berlin" style="display: none">Toggle 1 content</div><div id="zurich" style="display: none">Toggle 2 content</div>我的JSfunction male() { var x = document.getElementById("berlin"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; }}function female() { var x = document.getElementById("zurich"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; }}有什么想法或幫助嗎？提前謝謝
3 回答
斯蒂芬大帝
TA貢獻1827條經驗 獲得超8個贊
默認情況下，您可以簡單地在單擊 div 時隱藏該berlindiv zurich，對于單擊其他 div 也可以執行相同的操作，例如：
function male() {
var x = document.getElementById("berlin");
document.getElementById("zurich").style.display = "none";
x.style.display = x.style.display === "none" ? "block" : "none";
}
function female() {
var x = document.getElementById("zurich");
document.getElementById("berlin").style.display = "none";
x.style.display = x.style.display === "none" ? "block" : "none";
}
div {
background-color: #EEE;
border: 2px solid green;
padding: 20px;
margin: 20px;
}
<div class="toggle">
<button onclick="male()">open 1</button>
<button onclick="female()">open 2</button>
</div>
<div id="berlin" style="display: none">
Toggle 1 content
</div>
<div id="zurich" style="display: none">
Toggle 2 content
</div>
30秒到達戰場
TA貢獻1828條經驗 獲得超6個贊
您還可以使用該hidden屬性，例如：
let x = document.getElementById("berlin");
let y = document.getElementById("zurich");
function male() {
x.hidden = !x.hidden;
y.hidden = true;
}
function female() {
y.hidden = !y.hidden;
x.hidden = true;
}
<div class="toggle">
<button onclick="male()">open 1</button>
<button onclick="female()">open 2</button>
</div>
<div id="berlin" hidden>
Toggle 1 content
</div>
<div id="zurich" hidden>
Toggle 2 content
</div>
紅糖糍粑
TA貢獻1815條經驗 獲得超6個贊
如果您有更多切換按鈕和更多要顯示隱藏的容器，那么這應該會有所幫助
const toggleContainers = document.querySelectorAll('.toggle-container');
function hideAllToggles() {
toggleContainers.forEach(toggle => {
toggle.classList.add('hidden');
});
}
hideAllToggles();
function showToggle(id) {
hideAllToggles();
var x = document.querySelector(`#${id}`);
x.classList.remove('hidden');
x.classList.remove('active');
}
.hidden {
display: none;
}
.active {
display: block;
}
<div class="toggle">
<button onclick="showToggle('berlin')">open 1</button>
<button onclick="showToggle('zurich')">open 2</button>
</div>
<div class="toggle-container" id="berlin">
Toggle 1 content
</div>
<div class="toggle-container" id="zurich">
Toggle 2 content
</div>
- 3 回答
- 0 關注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消