Question

我目前正在开发一款应用。我有一个导航菜单，我可以使用按钮打开和关闭，但每当我加载应用程序时，菜单是打开的。我试过<div id="navigation" style="display:none;">，但这只是阻止它开启。我希望这可以是HTML，JavaScript和/或简单的CSS，但不是jQuery。此外，我想更改按钮（span TogNavTxt）中的文本以打开或关闭，具体取决于天气按钮将打开菜单或关闭菜单。我试过document.getElementById(TogNavTxt).innerHTML = Close;，但它没有用。

的index.html：

<!DOCTYPE html>
<html>
    <style>
        .btn-group button {
            background-color: #3333ff;
            width: 100%;
            border: 1px solid Black;
            color: white; 
            padding: 2px 10px;
            cursor: pointer;
            float: left;
        }

        .btn-group:after {
            content: "";
            clear: both;
            display: table;
        }

        .btn-group button:not(:last-child) {
            border-right: none;
        }

        .btn-group button:hover {
            background-color: #0000b3;
        }
    </style>
    <head>
        <link rel="stylesheet" type="text/css" href="Home.css">
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
        <title>ZcoolUnity</title>
    </head>
    <body>
        <button onclick="ToggleNav('navigation');">Open</button>
        <div id="navigation">
            <div class="btn-group">
                <a href="index.html"><button><b>Home</b></button></a>
                <a href="ZUGames.html"><button>ZU Games</button></a>
                <a href="ComunityGames.html"><button>Community Games</button></a>
                <a href="Announcments.html"><button>Announcments</button></a>
                <a href="Staff.html"><button>Staff</button></a>
                <a href="ContactMe.html"><button>Contact Me</button></a>
                <a href="Assets.html"><button>Assets</button></a>
            </div>
        </div>
        <script type="text/javascript" src="Home.js"></script>
    </body>
</html>

Home.js：

 function ToggleNav(navigation) {
       var e = document.getElementById(navigation);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }

Answer 1

即使你已经接受了答案，我也是为了完整性发布这个 - 它摆脱了内联样式和内联事件处理程序，正如我在评论中提到的那样，并将html，css分开和javascript（Separation of Concerns - ＆＃34; SoC＆＃34;）

Semantic标记使用描述某些内容和/或状态的类，因此这将导航块描述为打开或关闭。然后将打开或关闭的含义留给样式表我还将<div id="navigation">更改为<nav id="navigation"> ...如果您使用HTML5，则应使用可用的新语义标记。

我已对<link rel="stylesheet" ...>和<script src="Home.js">发表评论，因为＆＃34; Stack-snippet＆＃34;自动将它们作为代码段的一部分包含在内。另请注意，HTML5中不再需要type="text/javascript" （Stack Snippets！不再需要jsfiddles！）

＆＃13;

function ToggleNav(event) {
    let nav = document.getElementById('navigation');
    console.log('click triggered');
    
    let navClasses = nav.classList;
    if (nav.classList.contains('closed')) {
        nav.classList.remove('closed');
        nav.classList.add('open');
    }
    else {
        nav.classList.remove('open');
        nav.classList.add('closed');
    }
}

document.getElementById('toggle-nav')
        .addEventListener('click', ToggleNav);

＆＃13;

#navigation, #navigation.open {
    display: block;
}
#navigation.closed {
    display: none;
}

.btn-group button {
    background-color: #3333ff;
    width: 100%;
    border: 1px solid Black;
    color: white; 
    padding: 2px 10px;
    cursor: pointer;
    float: left;
}

.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

.btn-group button:not(:last-child) {
    border-right: none;
}

.btn-group button:hover {
    background-color: #0000b3;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
   <!-- <link rel="stylesheet" type="text/css" href="Home.css"> -->
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes, width=device-width">
        <title>ZcoolUnity</title>
    </head>
    <body>
        <button id="toggle-nav">Open</button>
        <nav id="navigation" class="closed">
            <div class="btn-group">
                <a href="index.html"><button><b>Home</b></button></a>
                <a href="ZUGames.html"><button>ZU Games</button></a>
                <a href="ComunityGames.html"><button>Community Games</button></a>
                <a href="Announcments.html"><button>Announcments</button></a>
                <a href="Staff.html"><button>Staff</button></a>
                <a href="ContactMe.html"><button>Contact Me</button></a>
                <a href="Assets.html"><button>Assets</button></a>
            </div>
        </nav>
   <!-- <script src="Home.js"></script> -->
    </body>
</html>

＆＃13;

Answer 2

基本上你的JS错过了一些＆＃34;围绕＆＃34;导航＆＃34;。要在启动时关闭它，请添加display：none并通过innerHTML在元素上设置新的Button文本。在type =＆＃34; button＆＃34;的输入标记上，改为设置值。

HTML：

<div id="navigation" style="display: none;">
  <div class="btn-group">
    <a href="index.html"><button><b>Home</b></button></a>
    <a href="ZUGames.html"><button>ZU Games</button></a>
    <a href="ComunityGames.html"><button>Community Games</button></a>
    <a href="Announcments.html"><button>Announcments</button></a>
    <a href="Staff.html"><button>Staff</button></a>
    <a href="ContactMe.html"><button>Contact Me</button></a>
    <a href="Assets.html"><button>Assets</button></a>
  </div>
</div>
<button id="togglebtn" onclick="toggleNav();">Open</button>
<input id="toggleinput" onclick="toggleNav();" value="Open" type="button">

JS：

function toggleNav(){
  var e = document.getElementById("navigation");
  if(e.style.display == 'none'){
    e.style.display = 'block';
    document.getElementById("togglebtn").innerHTML = "Close";
    document.getElementById("toggleinput").value = "Close";
  } else{
    e.style.display = 'none';
    document.getElementById("togglebtn").innerHTML = "Open";
    document.getElementById("toggleinput").value = "Open";
  }
}

在这里观看： https://codepen.io/anon/pen/BVwVrg

Answer 3

只需添加以下css：

#navigation {
    display: none;
}

默认隐藏菜单。

这是一个jsfiddle与其他一些有效的变化（不是很多）：

https://jsfiddle.net/md8njv2y/8/

如何在默认情况下关闭DIV元素？

3 个答案: