jQuery点击更改显示 [英] Jquery on click change display

问题描述

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

Hi guys I am just a beginner and I want to make hamburger menu. I already made a hamburger but when I want my jquery to work nothing happens. Can someone look at my code and tell me what is wrong?

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

，我想单击汉堡菜单"以更改类表演"的样式，即 显示:无显示:阻止

and I want on click at "burger-menu" to change style of class "show" which is display: none to display: block

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

I also would like to somehow toggle this classes I mean when I click on this hamburger, "ul" will take display: block but when I click again this will have display: none

推荐答案

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

You can't expect that code after src will execute. Move your functions to another script element (better before body closing tag).

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

As for your question, this should work:

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

祝你好运！

这篇关于jQuery点击更改显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！