第一次单击链接后，使链接不可单击，等待过渡结束+ 1秒，然后再次使链接可单击 [英] After link's first click, make link unclickable, wait for transition end + 1s, then make link clickable again

问题描述

我有一个主菜单.
单击具有子项的任何PARENT <li>的链接时，子菜单打开.
此时，将 moves-out 类添加到主菜单，并开始CSS过渡.
转换结束后，将显示子菜单.
子菜单包含单击的<li>(如果再次单击将带我们回到主菜单)及其子级.
在这里，我的目标是禁用父级<li>上的click事件1秒钟，
然后在这1秒钟后，让它返回被单击的功能，以便我们可以返回到主菜单.
导航的示例为:

I have a main menu.
The sub-menu opens when the link of any of the PARENT <li> that have children is clicked.
At this point, a class moves-out is added to the main menu and a CSS transition is started.
After the transition ends, the sub-menu is displayed.
The sub-menu contains the clicked <li> (if clicked again will take us back to the main menu) and it's children.
Here, my goal is to disable the click event on the parent <li> for 1 second,
then after this 1 second give it back the ability to be clicked so we can go back to the main menu.
An example of the navigation would be :

<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，如下所示:

The only way that worked for me was to hide/show the PARENT when the main menu has the moves-out class added to it like so :

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

I've tried A LOT off things, this is the only one that is near to my goal.
Instead off $this.hide(), $this.off('click') is working
but inside the setTimeout what ever I do to regain the click doesn't work.
Any help would be greatly appreciated.
NOTE : I want this to prevent fast click/re-click. Don't forget the transition ;)
Thanks again in advance for any help.
SYA :)

推荐答案

尝试在li标记上设置pointer-events，并在1秒钟后将其重置.

Try setting pointer-events on the li tag and resetting it after 1 second.

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

这篇关于第一次单击链接后，使链接不可单击，等待过渡结束+ 1秒，然后再次使链接可单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！