我想有一个非常简单的导航菜单。它必须是可点击的。所以当使用这段代码时
null
var isActive = true;
function toggleMenu(){
var content = $("#navContent");
isActive = !isActive; // toggle the current menu state
if(isActive) {
content.display = "block"; // show the items
} else {
content.display = "none"; // hide all items
content.position = "absolute";
content.zIndex = 1;
}
}#navContainer {
position: relative;
display: inline-block;
}
#navContent button {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="toggleMenu()">
<div id="navContainer">
<button id="navBtn" onclick="toggleMenu()">Menu</button>
<div id="navContent">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
</body>null
然后按下菜单按钮，进入
有人能帮帮我吗？
您的代码是纯JS和jQuery的奇怪混合体。我建议用一个或另一个。下面是使用jQuery的代码的简单版本:
null
$(function() {
$('#navBtn').click(function() {
$('#navContent').toggle();
});
});#navContainer {
position: relative;
display: inline-block;
}
#navContent button {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navContainer">
<button id="navBtn">Menu</button>
<div id="navContent">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
创建一个隐藏元素的CSS类会容易得多，然后由JS切换这些元素。这个答案不需要jQuery
null
function toggleMenu(){
document.getElementById('navContent').classList.toggle("hidden")
}#navContainer {
position: relative;
display: inline-block;
}
#navContent button {
display: block;
}
.hidden {
display: none;
}<div id="navContainer">
<button id="navBtn" onclick="toggleMenu()">Menu</button>
<div id="navContent" class="hidden">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
为什么不简化为:
null
$("#navBtn").click(function() {
$("#navContent").toggle();
});#navContainer {
position: relative;
display: inline-block;
}
#navContent {
display: none;
}
#navContent button {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="navContainer">
<button id="navBtn">Menu</button>
<div id="navContent">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
</body>