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動畫運行兩次後單擊

回答

相關問題