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

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

下面是一个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 3

不需要注册新的变量和计数点击。只需添加/删除不存在的类"clicked"并在点击时进行测试如果元素"被"点击

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

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

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

假设class = show .
class hidden=hidden

将显示的(默认)类添加到元素中类= '隐藏'

Then your script

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