如何使按钮同时具有打开和关闭功能？答案

【问题标题】：How to make a button function as both open and close?如何使按钮同时具有打开和关闭功能？
【发布时间】：2016-09-02 13:04:07
【问题描述】：

我想对已应用打开状态的同一个汉堡按钮应用关闭状态。关闭状态已应用于不同位置的另一个按钮。但我不想改变它。我只想复制打开按钮上的关闭状态

</script>
<script type='text/javascript'>
$(function() {  
    $('.menu').click(function () {
    $('#css-menu').css({right:'0'});
});
    $('.close-menu').click(function() {
    $('#css-menu').css({right:'-340px'});
});
 });
</script>

<li class='menu' title='Menu'></li>

如果有帮助将不胜感激

提前谢谢...

【问题讨论】：

看看toggleClass - api.jquery.com/toggleclass
尝试this.toggleClass() 引用被点击的元素。

标签： javascript jquery html css hamburger-menu

【解决方案1】：

你有点不清楚，但我认为你的意思是你想使用 JQuery 的 toggleClass，或者，我会使用点击记录，并检查计数是偶数还是奇数：打开还是关闭。

$(function() {  
    var clickCount = 0;
    $('.menu').click(function () {
        if(clickCount%2==0){
              //do when open
               $('#css-menu').css({right:'0'});
        }else{
             //do when closed
             $('#css-menu').css({right:'-340px'});
         }
        clickCount++;
    });
});

希望这会有所帮助。

【讨论】：

与上述相同的注释 ^^^ 属性left 和right 在浏览器的关键渲染路径中触发布局重建。 csstriggers.com/left
这完成了工作.. 但我必须添加 $('.close-menu').click(function() { $('#css-menu').css({right :'-340px'}); }); });保持前一个响应

【解决方案2】：

这里是一个toggleClass的例子。单击特定的<li> 将仅切换该<li> 的状态。

使用this.toggleClass() 来引用被点击的元素。

$(function() {
  $('.menu').click(function() {
    $(this).toggleClass('open');
  });
});

li ul {
  display: none;
}
li.open ul {
  display: block;
}
li:hover {
  cursor: pointer;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu">Menu 1
    <ul>
      <li>Sub item 1.1</li>
      <li>Sub item 1.2</li>
      <li>Sub item 1.3</li>
    </ul>
  </li>
  <li class="menu">Menu 2
    <ul>
      <li>Sub item 2.1</li>
      <li>Sub item 2.2</li>
      <li>Sub item 2.3</li>
    </ul>
  </li>
</ul>

【讨论】：

【解决方案3】：

无需注册新变量并计算点击次数。只需添加/删除不存在的类“点击”并点击测试如果元素“被”点击了

$(function() {  
  $('.menu').click(function () {
    if ($(this).is('.clicked')) {
      $(this).css({left:0})
                    .removeClass('clicked');
    } else {
      $(this).css({left:20})
                    .addClass('clicked');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class='menu' title='Menu' style='position:relative'>AA</li>

【讨论】：

通过像这样设置left，您将在浏览器的关键渲染路径中触发布局重建，这是一个潜在的性能问题。小心这个！

【解决方案4】：

创建 2 个类，其中一个是您的显示状态，另一个是隐藏状态为你的类定义 CSS

#css-menu.hidden {
  right: -340px;
}
#css-menu.shown {
  right: 0;
}

假设类显示 = 显示。
和类 hidden=hidden

添加显示的（默认）类你的元素类='隐藏'

Then your script



  $('.menu').click(function(){
    $('#css-menu').toggleClass('shown hidden');
    });

【讨论】：