导航栏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>

#第1部分{
显示：block；}






隐藏
函数abc（）
{
var togg=document.getElementById（'DIV1'）
如果（togg.style.display==“块”）
{
togg.style.display=“无”；
}
else if（togg.style.display==“无”）
{
togg.style.display=“block”；
}
}

---

它不起作用我该怎么做，或者我做错了什么？我跳过了导航栏的其他CSS属性。

以下是正确的代码：

#第1部分{
显示：block；}






隐藏
函数abc（）
{
var togg=document.getElementById（'DIV1'）；
if（togg.style.display==“block”）
{
togg.style.display=“无”；
}
其他的
{
togg.style.display=“block”；
}
}

如果我理解您的问题，请尝试以下问题：

#第一组{
显示：block；}
函数abc（）
{
var togg=document.getElementById（“div1”）
如果（togg.style.display==“无”）//3==
{
togg.style.display=“block”；
}
否则{
togg.style.display=“无”；
}
}






隐藏

它不起作用，因为您必须使用javascript或内联样式设置它的显示，才能通过div.style.display获取内容。在您的情况下，当您单击按钮时，显示未设置，因此您不能在

if

语句中或在

else if

语句中输入或。所以试试这个：

var-togg=document.getElementById（'DIV1'）；
togg.style.display=“block”/*=>我设置了一个显示值*/
函数abc（）{
如果（togg.style.display==“块”）
{
togg.style.display=“无”；
}
else if（togg.style.display==“无”）
{
togg.style.display=“block”；
}
}

#第1部分{
显示：块；
}
/*您可以删除此规则。您正在通过javascript更改显示*/

隐藏

最好解释不同之处以及解决问题的原因。首先单击隐藏不会隐藏导航。第二次点击就可以了。你真棒