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

Question

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

</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>

如有帮助，将不胜感激

提前致谢...

Answer 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++;
    });
});

希望对您有所帮助。

Answer 2

无需注册新变量和计算点击次数。只是 add/remove 不存在 class "clicked" 然后点击测试如果点击元素 "is"

$(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>

Answer 3

这里有一个 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>

Answer 4

创建 2 个 classes，其中一个是您的显示状态，另一个是隐藏状态为您的 classes

定义 CSS

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

假设 class 显示 = 显示。
并且 class hidden=hidden

添加显示的（默认）class 你的元素 Class= 'hidden'

Then your script



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

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

How to make a button function as both open and close?

html

javascript

css

jquery

hamburger-menu