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

document.querySelectorAll('[class^="cycle-"]');

假设所示的课程=显示而class hidden = hidden

将显示的（默认）类添加到您的元素中 Class ='hidden'

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

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

4 个答案: