Question

大家好，我只是一个初学者，我想做汉堡包菜单。我已经做过一个汉堡包，但是当我想要我的jQuery工作时，什么也没发生。有人可以看一下我的代码并告诉我哪里出了问题吗？

<script
      src="https://code.jquery.com/jquery-3.3.1.js"
      integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
      crossorigin="anonymous">

          $("#burger-menu").on("click",function(){

          $(".show").css("display","block")


        });

</script>

和我的html

<nav>
   <div class="nav-wrapper">
        <div id="burger-menu">
            <img src="img/icons/burger-menu.png" class="menu-burger">
        </div>
        <ul>
            <li class="show"><a href="#">Home</a></li>
            <li class="show"><a href="#">About</a></li>
            <li class="show"><a href="#">Contact</a></li>

            <div id="logo"><img src="logo.png"></div>

            <li class="show"><a href="#">Gallery</a></li>
            <li class="show"><a href="#">Menu</a></li>
            <li class="show"><a href="#">Other</a></li>
        </ul>
    </div>
</nav>

，我想单击“汉堡菜单”以更改类“显示”的样式，即显示：无显示：阻止

编辑：我也想以某种方式切换此类，即当我单击此汉堡包时，“ ul”将显示：阻止，但是当我再次单击时，将显示：无

Answer 1

您不能期望src之后的代码会执行。将函数移到另一个脚本元素（最好在body结束标记之前）。

对于您的问题，这应该可以解决：

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
    $("#burger-menu").on("click",function(){
          $("#menu_container").toggle();
    });
}); 
</script>

祝你好运！

Answer 2

选择包含ul类的show元素，并toggle()这样显示-

$("#burger-menu").on("click", function() {
  $("ul:has(.show)").toggle();
});

Answer 3

您可能没有注意容器。您可以从ul容器而不是单个菜单项进行工作。

所以给

指定一个ID

<ul>

喜欢

<ul id="menu_container">

在CSS中，您希望它开始隐藏，所以

#menu_container { display: none; }

然后在您的JS中，您应该可以只使用切换功能

$( document ).ready(function() {
    $("#burger-menu").on("click",function(){
         $("#menu_container").toggle();
    });
});

Answer 4

如果您正在使用元素，则除非页面要刷新，否则e.preventDefault()是必需的。

    $("#dropdownHead").on("click",function (e) {
        $("#dropdownMenu").toggle();
        e.preventDefault();
    });

jQuery点击更改显示

4 个答案: