时间戳

首页 > 解决方案 > 切换类重叠

javascript - 切换类重叠

问题描述

我正在尝试使用相同的按钮来打开和关闭菜单，我相信这非常简单，但我是 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

我尝试向“开放”类添加延迟，但由于某种原因，延迟仅在第一次点击时起作用 - 在第二次点击时它会立即改变类。这是我正在尝试的代码。

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

标签： javascriptjquery

解决方案

您在单击中再次引用 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>

推荐阅读