使用javascript切換菜單
[英]Toggle menu using javascript
問題描述
我需要打開切換來監聽單擊，然后將切換框的類名稱更改為“打開”。 然后讓一次切換關閉監聽一次單擊，然后將切換框的類名稱更改為“關閉”。 這是我已經擁有的代碼，它無法正常工作，有什么建議嗎？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drop Down</title>
<link rel="stylesheet" href="dropdown.css" type="text/css"/>
</head>
<body>
<div id="toggle-box" class="close">
<div id="toggle-open">Settings</div>
<div id="toggle-close">Close</div>
<ul>
<li>
<label for="s-1">
<input id="s-1" type="checkbox" checked>
<span>Setting One</span>
</label>
</li>
<li>
<label for="s-2">
<input id="s-2" type="checkbox" checked>
<span>Setting Two</span>
</label>
</li>
<li>
<label for="s-3">
<input id="s-3" type="checkbox">
<span>Setting Three</span>
</label>
</li>
<li>
<label for="s-4">
<input id="s-4" type="checkbox" checked>
<span>Setting Four</span>
</label>
</li>
<li>
<label for="s-5">
<input id="s-5" type="checkbox">
<span>Setting Five</span>
</label>
</li>
</ul>
</div>
<p style="margin-top: 100px; text-align: center; font-size: 75%;"><a href="../dropdown.zip">Download the files (dropdown.zip)</a></p>
<script src="dropdown.js"></script>
</body>
>
3 個解決方案
解決方案1
0 2013-10-31 22:03:57
如果您可以將jquery javascript庫添加到頁面中（僅添加一個<script>塊），則可以使用以下javascript完成：
$("#toggle-open").click(function() {
$("#toggle-box").attr("class", "open");
});
$("#toggle-close").click(function() {
$("#toggle-box").attr("class", "close");
});
沒有jQuery：
document.getElementById("toggle-open").addEventListener("click", function() {
document.getElementById("toggle-box").setAttribute("class", "open");
});
document.getElementById("toggle-close").addEventListener("click", function() {
document.getElementById("toggle-box").setAttribute("class", "close");
});
解決方案2
0 2013-10-31 22:29:58
不需要jQuery。
var toggleBox = document.getElementById('toggle-box');
document.getElementById('toggle-open').click = function() {
toggleBox.className = 'open';
};
document.getElementById('toggle-close').click = function() {
toggleBox.className = 'close';
};
解決方案3
0 2013-10-31 22:37:37
代替該行：
<script src="dropdown.js"></script>
在您的代碼中，您可以編寫：（您可以刪除具有alert（tooglebox.className）的行；我剛剛對其進行了測試。）
<script>
var settings = document.getElementById('toggle-open');
var close = document.getElementById('toggle-close');
var tooglebox = document.getElementById('toggle-box');
settings.onclick = function(){
tooglebox.className = "open";
alert(tooglebox.className);
}
close.onclick = function(){
tooglebox.className = "close";
alert(tooglebox.className);
}
</script>
使用jquery或javascript制作Accordeon / toggle菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.