Jquery Animation zweimal nach dem Klick ausführen

Question

Ich habe ein Problem mit Jquery animieren. meine Situation ist hier:

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; 

} 

Skript:

$(".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/

Ich habe einen Link im Hauptmenü (Schaltfläche anklicken). Wenn ich auf diesen Link klicke, erscheint mein Untermenü slideDown. nach einem weiteren Klick auf den Untermenüpunkt (Punkt 1), Ebene 2 Untermenü von links schieben (links 0% animieren). Zu diesem Schritt ist es in Ordnung. In Untermenü Ebene 2 habe ich eine Zurück-Taste. Nach dem Klick auf diesen Button muss das Untermenü Ebene 2 ausgeblendet werden (animiere links 100%). Aber wenn ich auf die Zurück-Taste klicke, rutscht das Untermenü Ebene 2 nach links (links 0% - das ist ok) und kehrt sofort zur Position zurück, was ich natürlich nicht will.

Was mache ich falsch, dass Sie das Menü nicht ausgeblendet nach dem Klicken auf die Schaltfläche zurück?

thx für die Hilfe

Answer 1

Sie haben nichts falsch in Ihrem c Ode. Es ist nur wegen Ereignis das andere Click-Ereignis sprudelnden ausgelöst wurden, wenn Sie klicken Sie auf die Schaltfläche zurück

Working JSFiddle

Sie müssen nur e.stopPropagation(); in Ihrem Click-Ereignis

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

Ereignis verwenden. stopPropagation()

Beschreibung: Pr Ereignisse das Ereignis von sprudeln die DOM-Struktur, verhindert, dass alle übergeordneten Handler von dem Ereignis benachrichtigt werden. read more

Answer 2

Warum verlassen haben Sie Stil verwenden?

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

Dies funktioniert einmal, für das gesamte Skript Sie alle Funktionen bearbeiten müssen, vielleicht wird diese Ihnen helfen, eine Menge: Sie können mit .hide() und .show()

zum Beispiel einfach tun

jQuery Hide

jQuery Show