Question

所以我尝试使用JQuery进行导航栏切换，但是当我点击跨度按钮时，什么也没发生。

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>

可以在http://joshscottonthe.net/Unit20/Photographer找到实时版本 - 只需将您的浏览器重新缩放至少于960像素，您就会看到按钮

Answer 1

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

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

或者您可以按照相同的方式添加它，只需确保在<script>之后放置<span class='navbar-button'>标记。

Answer 2

我认为这应该可以解决问题：

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

使用Div的JQuery Toggle导航栏

2 个答案: