Navigation bar JavaScript

我正在编写一段代码，用按钮打开和关闭导航栏我的代码如下

#DIV1{
display:block;}
<div id="DIV1">
<ul class="topnav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#news">News</a></li>
<li><a href="#home">Home</a></li>
</ul>
</div>
<button  onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1')
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}
</script>

我该做什么或者我做错了什么？导航栏还有其他CSS属性，我已经跳过了。

它不起作用，因为你必须用javascript或内联样式设置它的显示，才能通过你的div.style.display获得一些东西。在你的情况下，当你点击按钮时，显示没有设置，然后你不能在if和else if语句中输入nor。所以试试这个：

var togg = document.getElementById('DIV1');
togg.style.display="block"; /* => I set a display value */
function abc(){
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}

#DIV1 {
display:block;
}
/*you can remove this rule. You are changing the display via javascript */

<div id="DIV1">
<ul class="topnav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#news">News</a></li>
<li><a href="#home">Home</a></li>
</ul>
</div>
<button  onClick="abc()">HIDE</button>

另一种方法是：只需创建一个类来"隐藏"div，然后使用classList和toggle:进行切换

function abc(){
var togg = document.getElementById('DIV1')
togg.classList.toggle("myClass");
}

.myClass {
display:none;
}

<div id="DIV1">
<ul class="topnav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#news">News</a></li>
<li><a href="#home">Home</a></li>
</ul>
</div>
<button  onClick="abc()">HIDE</button>

这里是正确的代码：

<style> #DIV1{
display:block;}
</style>
<div id="DIV1">
<ul class="topnav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#news">News</a></li>
<li><a href="#home">Home</a></li>
</ul>
</div>
<button  onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1');
if (togg.style.display == "block")
{
togg.style.display="none";
}
else 
{
togg.style.display="block";
}
}
</script>

如果我理解你的问题，试试这个：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#div1{
display:block;}
</style>

<script>
function abc()
{
var togg = document.getElementById("div1")
if (togg.style.display === "none")// 3 === 
{
togg.style.display="block";
}
else {
		togg.style.display="none";
}
}
</script>
</head>
<body>
<div id="div1">
<ul class="topnav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#news">News</a></li>
<li><a href="#home">Home</a></li>
</ul>
</div>
<button  onclick="abc()">HIDE</button>
</body>
</html>

相关内容

最新更新

热门标签：