链接首次点击后，使链接不可点击，等待过渡结束 + 1，然后再次使链接可点击

Question

我有一个主菜单。
单击具有子级的任何父<li>的链接时，将打开子菜单。
此时，类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类时隐藏/显示 PARENT，如下所示：

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

这是一种使用递归函数的方法，该函数启用了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>

Answer 3

更像是一个去抖动问题，如果你以前没有用过它，你可能想看看它，它会对设计你的代码有很大帮助。

对于以下示例，我在ul中添加了moves-out进行测试，可以查看控制台.log查看结果。要在应用程序中使用，请不要忘记将其(moves-out)从<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 -->