链接第一次点击后，使链接不可点击，等待转换结束+ 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>