Question

我只是整个javascript / jQuery世界的新手，我遇到了一些我无法识别的问题。我正在使用列表测试.toggle，这将是一个菜单。但是，当我按下临时按钮以便切换菜单时，没有任何反应。

我的代码：

＆＃13;

$(document).ready(function() {
  $("#menuIcon").click(function() {
    $("#menu").fadeIn(1000);
  });
});

＆＃13;

#menuIcon {
  display: none;
}
@media screen and (max-width: 1000px) {
  #menu {
    display: none;
  }
  #menuIcon {
    display: block;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="menuIcon">Click Me</button>
<div id="menu">
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Page</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>

＆＃13;

Answer 1

一切正常，您只需要添加 jquery cdn脚本 。

 <!DOCTYPE html>
<html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    #menuIcon{
        display: none;
    }
        @media screen and (max-width: 1000px){
            #menu{

                display: none;
            }
            #menuIcon{
                display: block;
            }
        }
    </style>
    </head>
    <body>
    <button id="menuIcon">Click Me</button>
    <div id="menu">
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Page</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
    <script>
        $(document).ready(function(){
            $("#menuIcon").click(function(){
                $("#menu").fadeIn(1000);
            })
        });
    </script>
</body>
</html>

Answer 2

在代码中链接jquery脚本并使用Jquery 切换，切换display菜单。

$("#menu").toggle("display")

目前，您只是淡入菜单。

检查以下已更新代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
    #menuIcon{
        display: none;
    }
        @media screen and (max-width: 1000px){
            #menu{

                display: none;
            }
            #menuIcon{
                display: block;
            }
        }
    </style>
    </head>
    <body>
    <button id="menuIcon">Click Me</button>
    <div id="menu">
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Page</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
    <script>
        $(document).ready(function(){
            $("#menuIcon").click(function(){
                $("#menu").toggle("display");
            })
        });
    </script>
</body>
</html>

＆＃13;

使用jQuery尝试菜单切换时没有任何反应

2 个答案: