Klicken Sie nach dem ersten Klick der Verknüpfung auf link unclickable, warten Sie auf den Übergangsende + 1s, und stellen Sie die Verknüpfung erneut auf klick.

Question

Ich habe ein Hauptmenü.
Das Untermenü wird geöffnet, wenn auf den Link eines der PARENT <li> geklickt wird, die untergeordnete Elemente haben.
An dieser Stelle wird eine Klasse moves-out zum Hauptmenü hinzugefügt und ein CSS-Übergang wird gestartet.
Nach dem Ende des Übergangs wird das Untermenü angezeigt.
Das Untermenü enthält die angeklickte <li> (wenn erneut geklickt wird uns zurück zum Hauptmenü) und es ist Kinder.
Hier ist mein Ziel, das Klickereignis auf dem Eltern <li> für 1 Sekunde,
zu deaktivieren, dann nach dieser 1 Sekunde gibt es wieder die Möglichkeit, angeklickt werden, so dass wir zurück zum Hauptmenü gehen können.
Ein Beispiel der Navigation wäre:

<ul class="main-nav"> 
    <li><a href="#0">Home</a></li> 
    <li><a href="#0">Blog</a></li> 
    <li><a href="#0">About</a></li> 
    <li><a href="#0">Contact</a></li> 
    <li> 
     <a href="#0" class="subnav-trigger"><span>PARENT</span></a> 

     <ul>     
      <li><a href="#0">Child 1</a></li> 
      <li><a href="#0">Child 2</a></li> 
      <li><a href="#0">Child 3</a></li> 
      And so on... 
     </ul> 
    </li> 
</ul> <!-- .main-nav --> 

Der einzige Weg, die für mich gearbeitet wurde verstecken/die ELTERN zu zeigen, wenn das Hauptmenü die moves-out Klasse hinzugefügt, um es wie so hat:

$('.subnav-trigger').on('click', function(event) { 
    event.preventDefault(); 
    if ($('.main-nav').hasClass('moves-out')) { 
     var $this = $(this); 
     $this.hide(); 
     setTimeout(function(){ 
      $this.show(); 
     }, 1000); 
    } 
} 

habe ich VIEL off Dinge ausprobiert, das ist die einzige, die in der Nähe von zu meinem Ziel.
Anstelle von $this.hide() funktioniert $this.off('click') funktioniert
aber innerhalb der setTimeout was auch immer ich tun, um den Klick wieder zu gewinnen funktioniert nicht.
Jede Hilfe würde sehr geschätzt werden.
HINWEIS: Ich möchte damit schnelles Klicken/erneutes Klicken verhindern. Vergiss den Übergang nicht;)
Nochmals vielen Dank im Voraus für jede Hilfe.
SYA :)

Answer 1

Try pointer-events auf dem li tag Einstellung und nach 1 Sekunde zurückgesetzt wird.

$('.subnav-trigger').on('click', function(event) { 
    event.preventDefault(); 
    var $this = $(this); 
    $this.parent().css("pointer-events","none"); 
    if ($('.main-nav').hasClass('moves-out')) { 
    $this.hide(); 
    setTimeout(function(){ 
     $this.show(); 
     $this.parent().css("pointer-events","auto"); 
    }, 1000); 
    } 
}); 

Answer 2

Mehr wie ein debounce Problem, könnte man einen Blick auf sie nehmen möchten, wenn Sie es noch nie benutzt haben, wird es eine Menge in Design Sie Code helfen.

Für das folgende Beispiel, ich hinzugefügt moves-out zu ul zum Testen, können Sie die console.log überprüfen, um das Ergebnis zu sehen. Um in Ihrer App verwenden Sie vergessen nicht, es zu entfernen (moves-out) aus dem <ul...>

<ul class="main-nav moves-out">

function debounce() { 
 
    if ($('.main-nav').hasClass('moves-out')) { 
 
     console.log("Clicked - click event Disabled.."); 
 
     $(this).off('click'); 
 
     setTimeout(function() { 
 
      $(".subnav-trigger").on('click', debounce); 
 
      console.log("click event enabled!"); 
 
     }.bind(this), 1000); 
 
    } 
 
}; 
 

 
$(".subnav-trigger").on('click', debounce);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="main-nav moves-out"> 
 
    <li><a href="#0">Home</a></li> 
 
    <li><a href="#0">Blog</a></li> 
 
    <li><a href="#0">About</a></li> 
 
    <li><a href="#0">Contact</a></li> 
 
    <li> 
 
    <a href="#0" class="subnav-trigger"><span>PARENT</span></a> 
 

 
    <ul> 
 
     <li><a href="#0">Child 1</a></li> 
 
     <li><a href="#0">Child 2</a></li> 
 
     <li><a href="#0">Child 3</a></li> 
 
     And so on... 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<!-- .main-nav -->

Answer 3

Hier ist ein Weg, um eine rekursive Funktion, die die click Handler aktiviert, deaktiviert es auf click, aktiviert das Ereignis transitionend, fügt Ihre Klasse hinzu, die den Übergang aktiviert, und aktiviert dann die Funktion erneut. Aktiviert einen 3-Sekunden-Übergang, um das Beispiel zu verlangsamen.

var $lis = $('li'), 
 
    clicker = function() { 
 
     $lis.on('click', function() { 
 
     $lis.off('click'); 
 
     $(this).on('transitionend', function() { 
 
      clicker(); 
 
     }).addClass('color'); 
 
     }); 
 
    } 
 

 
clicker();

li { 
 
    transition: background 3s; 
 
} 
 
li.color { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="main-nav"> 
 
    <li><a href="#0">Home</a></li> 
 
    <li><a href="#0">Blog</a></li> 
 
    <li><a href="#0">About</a></li> 
 
    <li><a href="#0">Contact</a></li> 
 
</ul>