jquery动画运行两次后单击

我有一个jQuery的动画问题。我的情况是在这里：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％ - 这是可以的），并立即返回到这个位置，当然我不想要。

我在做什么错误，你不会在点击后退按钮后隐藏菜单？

thx求助

来源

2017-06-20 Lubos Belan

你到现在为止的代码将有所帮助。也许在https://jsfiddle.net/ – Chetan

告诉我们你的代码... –

对不起，我编辑了这篇文章。现在可以了。 –

你有什么错在你的c颂。它只是由于事件冒泡的其他点击事件得到当你点击后退按钮

Working JSFiddle

你只需要在点击事件

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

事件使用e.stopPropagation();触发。 stopPropagation（）

描述： Pr从冒泡DOM树中事件事件，阻止任何父处理程序被通知事件。 read more

来源

2017-06-20 12:57:08

你很棒。 thx你这么多:) –

你为什么用左边的样式？你可以这样做容易.hide()和.show()

例如：

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

这将工作一次，你需要编辑的所有功能完整的剧本，也许这将帮助你很多：

jQuery Hide

jQuery Show

来源

2017-06-20 11:33:03 Lib3r74

thx你回答，但我想用左。在这种情况下你能帮助我吗？ –

jquery动画运行两次后单击

回答

相关问题