ToggleClass重叠

Question

我正在尝试使用相同的按钮来打开和关闭菜单，我确信这非常简单，但我对jQuery的世界还不熟悉。如果有帮助的话，我正在使用Wordpress builder 'Oxygen‘。下面是我的代码：

模态是网站构建器的一个内置功能，所以我不能提供太多的代码。它基本上被设置为在单击具有"open“类的元素时触发，并使用”oxy-modal close“元素类关闭。

jQuery

jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('open oxy-modal-close');
});

HTML

<div id="toggle" class="open">
   <img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>

CSS

#plus {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 0.3s;
  width: 35px;
  position: fixed;
  top: 20px;
  right: 20px;
}

.rotate {
  transform: rotate(45deg);
}

基本上在第二次单击时，类正在重新添加类"open"，这会导致菜单闪烁，因为这两个操作相互冲突。视频点击此处- https://gph.is/g/ZnNQddo

我试着给"open“类增加一个延迟，但是由于某些原因，这个延迟只在第一次点击时起作用--第二次点击时，它会立即改变类。这是我正在尝试的代码。

jQuery("#toggle").click(function () {
jQuery('#plus').toggleClass('rotate');
jQuery('#toggle').toggleClass('oxy-modal-close');
  
        var el = jQuery("#toggle");
    window.setTimeout(function() {
        el.toggleClass('open');
    }, 500); 
  
});

Answer 1

您在单击中再次引用该id -您需要引用$(this)...在单击时切换类的步骤

此外，您需要从其中一个状态开始，这样每次单击时，它都可以根据代码段将类切换到另一个状态(根据样式，十字图标位于代码段窗口的右侧)-现在，当您单击它时，它会按预期旋转。

​

$("#toggle").click(function() {
  $('#plus').toggleClass('rotate');
  $(this).toggleClass('open oxy-modal-close');
});

#plus {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 0.3s;
  width: 35px;
  position: fixed;
  top: 20px;
  right: 20px;
}

.rotate {
  transform: rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="toggle" class="open">
   <img id="plus" src="http://hausse.co.uk/wp-content/uploads/2021/01/plus.svg"/>
</div>

​