个人中心
gpt4 book ai didi

javascript - 在 Javascript 中切换一个简单的导航

转载 作者：太空宇宙 更新时间：2023-11-03 22:37:29 24 4
gpt4 key购买 nike

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

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>

然后按下菜单按钮，我进入了 toggleMenu() 函数，但元素没有隐藏。

有人可以帮帮我吗？

最佳答案

您的代码是纯 JS 和 jQuery 的相当奇怪的组合。我建议使用一个或另一个。这是使用 jQuery 的代码的简单版本:

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

关于javascript - 在 Javascript 中切换一个简单的导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45674198/

24 4 0
文章推荐： css - 如何使用css选择指定tr标签中的最后一个td
文章推荐： javascript - Node.js 连接无法正确提供图像
文章推荐： python - 有没有一种方法可以将图像保存在 OpenCV 执行期间创建的子文件夹中
文章推荐： c# - 使用 Flag 属性时的枚举问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com