jquery点击改变显示

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>

我想点击“burger-menu”来改变类“show”的样式 显示:无 显示: block

编辑:我也想以某种方式切换这个类我的意思是当我点击这个汉堡包时，“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>

祝你好运!