点击后Jquery动画运行两次答案

【问题标题】：Jquery animate run twice after click点击后Jquery动画运行两次
【发布时间】：2017-06-20 08:28:51
【问题描述】：

我对 jquery animate 有疑问。我的情况在这里：

HTML：

<span class="button">click</span>
<div class="submenu">
  <ul class="menu">
    <li class="parent">
      <a href="#">Item 1</a>
      <div>
        <ul>
          <li class="back-to-category">
            <span>back</span>
          </li>
          <li>
            <a href="#">Lvl2 Item 1</a>
          </li>
          <li>
            <a href="#">Lvl2 Item 1</a>
          </li>
          <li>
            <a href="#">Lvl2 Item 1</a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">Item 2</a>
    </li>
    <li>
      <a href="#">Item 3</a>
    </li>
  </ul>
</div>

CSS：

.button {
  background:black;
  color:white;
  padding:1em;
  cursor:pointer;
}
.submenu {
  display:none;
  position:relative;
  width:100%;
}
ul.menu > li {
  background:#ccc;
}
.submenu li > div {
  background:#eee;
  position:absolute;
  top:0;
  left:100%;
  width:100%;
}
.submenu .back-to-category {
  background:red;

}

脚本：

$(".button").click(function() {
  $(".submenu").slideToggle("slow");
});
$(".submenu ul.menu > li.parent").click(function() {
  $(this).children("div").animate({
    "left": "0%"
});
});
$(".submenu .back-to-category").click(function() {
  $(this).parent().parent("div").animate({
    "left": "100%"
  });
});

https://jsfiddle.net/caesarSK/0g9nfnq8/2/

我在主菜单中有一个链接（点击按钮）。当我单击此链接时，我的子菜单会向下滑动。再次单击子菜单项（项目 1）后，从左侧滑动 2 级子菜单（动画左侧 0%）。到这一步就OK了。在 2 级子菜单中，我有一个后退按钮。单击此按钮后，必须隐藏 2 级子菜单（动画左 100%）。但是当我点击后退按钮时，二级子菜单向左滑动（向左 0% - 可以）并立即返回到该位置，这当然是我不想要的。

单击后退按钮后您不会隐藏菜单，这是我做错了什么？

谢谢帮助

【问题讨论】：

到目前为止您所拥有的代码会有所帮助。也许在jsfiddle.net
向我们展示您的代码...
抱歉，我编辑了帖子。现在好了。

标签： jquery

【解决方案1】：

您的代码没有任何问题。它只是由于事件冒泡，当您单击后退按钮时会触发其他单击事件

Working JSFiddle

您只需在点击事件中使用e.stopPropagation();

$(".submenu .back-to-category").click(function(e) { console.log('c');
  $(this).parent().parent("div").animate({
    "left": "100%"
  });
  e.stopPropagation();
});

event.stopPropagation()

说明： 防止事件冒泡 DOM 树，防止任何父处理程序收到事件通知。 read more

【讨论】：

【解决方案2】：

你为什么使用左样式？ .hide() 和 .show() 让你轻松搞定

例如：

$(".submenu .back-to-category").click(function() {
  $(this).parent().parent("div").hide({
  });
});

这将工作一次，对于完整的脚本，您需要编辑所有功能，也许这会对您有很大帮助：

jQuery Hide

jQuery Show

【讨论】：

谢谢你的回答，但我想用左边。在这种情况下你能帮我吗？