Question

我的jquery动画有问题。我的情况在这里：

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/

我在主菜单中有一个链接（点击按钮）。当我点击此链接时，我的子菜单slideDown。再次点击子菜单项（第1项）后，2级子菜单从左侧滑动（动画左侧为0％）。这一步没关系。在子菜单2级我有一个后退按钮。单击此按钮后，必须隐藏子菜单级别2（动画左侧100％）。但是当我点击后退按钮时，子菜单2级向左滑动（左边0％ - 这没关系）并立即返回到当前我不想要的位置。

如果您在点击后退按钮后不会隐藏菜单，我做错了什么？

请求帮助

Answer 1

你为什么要使用左派风格？您可以使用.hide()和.show()

轻松完成

例如：

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

这将运行一次，对于您需要编辑所有功能的完整脚本，这可能会对您有所帮助：

jQuery Hide

jQuery Show

Answer 2

您的代码没有任何问题。它只是由于事件冒泡而另一个点击事件在您点击后退按钮时被触发

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

单击后Jquery动画运行两次

2 个答案: