Jqueryアニメーションは、クリック後に2回実行されます。

Question

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/

メインメニュー（リンクボタン）にリンクがあります。このリンクをクリックすると、私のサブメニューのslideDownが表示されます。サブメニュー項目（項目1）をもう一度クリックすると、レベル2のサブメニューが左からスライドします（アニメーション左の0％）。このステップには大丈夫です。 サブメニューレベル2には戻るボタンがあります。このボタンをクリックすると、サブメニューレベル2を非表示にする必要があります（アニメーションは100％左に移動します）。 しかし、戻るボタンをクリックすると、サブメニューレベル2が左にスライドします（左の0％ - これは大丈夫です）。すぐにその位置に戻ります。

バックボタンをクリックした後にメニューを非表示にしないといけないことは間違っていますか？

助けを借りて

Answer 1

あなたがCに間違って何もありませんオード。そのはちょうど他のクリックイベントをバブリングイベントのために、あなたがちょうどあなたのクリックイベント

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

イベントでe.stopPropagation();を使用する必要が

Working JSFiddle

バックボタンをクリックしたときにトリガなっています。 stopPropagation（）

説明： Pr DOMツリーをバブリングしてイベントをイベント化します。 イベントの通知を受けていない親ハンドラを防ぎます。 read more

Answer 2

なぜ左のスタイルを使用しますか？あなたは、例えば.hide()と.show()

で簡単に行うことができます。

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

をこれは、あなたが多分これはあなたに大いに役立つだろう、すべての機能を編集する必要がある完全なスクリプトについては、一度に動作します：

jQuery Hide

jQuery Show