鏈接第一次點擊後，使鏈接不可點擊，等待轉換結束+ 1秒，然後再次鏈接點擊

Question

我有一個主菜單。
當點擊了有子女的任何父母的鏈接時，子菜單打開。
在這一點上，一個類moves-out被添加到主菜單，並開始CSS轉換。
轉換結束後，顯示子菜單。
子菜單包含點擊<li>（如果再次點擊將帶我們回到主菜單），它是孩子。
在這裏，我的目標是禁用家長<li>上的點擊事件1秒，
然後在這1秒鐘之後讓它返回被點擊的能力，以便我們可以回到主菜單。導航的
的例如是：

<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 --> 

只爲我工作的方式是隱藏/顯示父在主菜單中添加了像這樣的moves-out類：

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

我已經試過很多過的事情，這是唯一的一個是附近我的目標。
取而代之關$this.hide(),$this.off('click')正在工作
但在setTimeout裏面我做了什麼以重新獲得點擊是行不通的。
任何幫助將不勝感激。
注意：我希望這可以防止快速點擊/重新點擊。不要忘記過渡;）
再次感謝您的任何幫助。
SYA :)

Answer 1

嘗試在li標記上設置pointer-events並在1秒後重置標記。

$('.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

更像是一個去抖問題，你可能想看看，如果你以前沒有使用過它，它會幫助很多在設計你的代碼。

對於以下示例，我添加了moves-out到ul進行測試，您可以檢查console.log以查看結果。要在應用程序中使用不忘記從<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

取出（moves-out）下面是使用使click處理遞歸函數，禁用方法它在click上，啓用transitionend事件，添加啓用轉換的類，然後重新啓用該功能。例如，啓用3s轉換以減慢速度。

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>