Question

我想要一个非常简单的导航菜单。它必须是可点击的。所以在使用这段代码时

＆＃13;

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;
    }
}

＆＃13;

#navContainer {
    position: relative;
    display: inline-block;
}

#navContent button {
    display: block;
}

＆＃13;

<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>

＆＃13;

然后按下菜单按钮，我进入了toggleMenu()功能，但项目无法隐藏。

有人能帮助我吗？

Answer 1

您的代码是普通JS和jQuery的奇怪组合。我建议使用其中一个。这是使用jQuery的代码的简单版本：

＆＃13;

#navContainer {
  position: relative;
  display: inline-block;
}

#navContent button {
  display: block;
}

＆＃13;

<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>

＆＃13;

#include <sys/endian.h>

int main(){
    uint64_t a = 100;
    be64toh(a);
}

＆＃13;

Answer 2

制作一个隐藏元素的CSS类会更容易，然后由JS切换。这个答案并不需要jQuery

＆＃13;

function toggleMenu(){
    document.getElementById('navContent').classList.toggle("hidden")
}

＆＃13;

#navContainer {
    position: relative;
    display: inline-block;
}

#navContent button {
    display: block;
}

.hidden {
    display: none;
}

＆＃13;

<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>

＆＃13;

Answer 3

为什么不简化它：

＆＃13;

$("#navBtn").click(function() {
  $("#navContent").toggle();
});

＆＃13;

#navContainer {
  position: relative;
  display: inline-block;
}

#navContent {
  display: none;
}

#navContent button {
  display: block;
}

＆＃13;

<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>

＆＃13;

在Javascript中

3 个答案: