Question

我是一名jQuery初学者。

尝试将已关闭状态应用于已应用的打开状态的同一个汉堡包按钮。

我可以点击汉堡包按钮并显示滑出导航，但是当复制按钮并应用关闭状态时，它似乎不想工作。

我正在关注这篇文章：http://css-tricks.com/off-canvas-menu-with-css-target/

这是我的codepen： http://codepen.io/Goatsy/pen/mBqku

  <a href="#main-nav" class="open-menu">
<button>
    <span class="line line-t"></span>
    <span class="line line-m"></span>
    <span class="line line-b"></span>
</button>
  </a>  


  <a href="#" class="close-menu">
<button>
    <span class="line line-t"></span>
    <span class="line line-m"></span>
    <span class="line line-b"></span>
</button>
  </a>

更新：我添加了我希望是正确的切换功能。现在导航正在消失。我希望点击X时导航关闭。点击汉堡时导航打开。

$("button").on("click",function(){
  $(this).toggleClass("menu-on");
});


$( "button" ).click(function() {
  $( "nav" ).toggle( );
});

Answer 1

您需要使用.toggle功能，而here是有关如何使用它的教程。

例如，如果您要使用ID栏切换显示和隐藏div：

$("button").click(function() {
  $('#bar').toggle(function() {
    $(this).show(1000);
  }, function() {
    $(this).hide(1000);
  });
});

将打开和关闭状态应用于同一按钮？

1 个答案: