javascript - jQuery Toggle Navigation Bar 使用 Div

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>

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

Answer 1

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

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

或者您可以像以前一样包含它，只需确保 <script>标签放在 <span class='navbar-button'> 之后.