JQuery使用Div切换导航栏

JQuery Toggle Navigation Bar Using Div

本文关键字：导航 使用 Div JQuery      更新时间：2023-09-26

所以我试图使用JQuery切换导航栏，但当我单击span按钮时，什么都没有发生。

HTML

       <div id="navbar">
        <span class="navbar-btn"></span>
        <ul>
            <li class="currentpage"><a href="/Unit20/Photographer/">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>

JQuery

    <script>
        $('span.navbar-btn').click(function() {
            $('#navbar').toggle();
        });
    </script>

Live版本可在http://joshscottonthe.net/Unit20/Photographer-只需将浏览器重新缩放到960像素以下，就可以看到按钮

加载文档后，需要包含脚本。

$(function() {
  $('span.navbar-btn').click(function() {
    $('#navbar').toggle();
  });
})

或者，您可以以相同的方式包含它，只需确保<script>标记位于<span class='navbar-button'>之后即可。

我认为这应该解决问题：

 $(document).ready(function(){
            $('span.navbar-btn').click(function() {
                $('#navbar').toggle();
            });
            });
相关文章：