将打开和关闭状态都应用到同一个按钮？答案

【问题标题】：Apply both open and close state to same button?将打开和关闭状态都应用到同一个按钮？
【发布时间】：2014-09-07 08:34:58
【问题描述】：

我是 jQuery 初学者。

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

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

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

这是我的代码笔： 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( );
});

【问题讨论】：

这不是一个 jQuery 问题。您使用的演示是纯 CSS。您的 CodePen 条目缺少 header 元素，该元素具有正在执行所有工作的交换 open-menu / close-menu 元素。
您想隐藏包含“这只小猪去市场”文本的 div 吗？点击关闭按钮？
也可以在nav 上切换一些课程。 :target 对于切换逻辑没有多大用处。
@ShankerPaudel 我希望在单击 X 时关闭导航。单击汉堡时打开导航。

标签： jquery css

【解决方案1】：

你需要使用.toggle函数，here是一个使用教程。

例如，如果你想为带有 id bar 的 div 切换显示和隐藏：

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

【讨论】：