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);
    }
}

我尝试了 A LOT ，这是唯一一个接近的目标。
取而代之的是$this.hide()，$this.off('click')正在工作中但是在setTimeout内部我要做的就是重新获得点击不起作用任何帮助将不胜感激 注意：我希望这可以防止快速点击/重新点击。不要忘记过渡;）
提前感谢您的任何帮助。
SYA：）

Answer 1

尝试在CheckBox标记上设置pointer-events，并在1秒后重置。

li

Answer 2

更像是一个 debounce 问题，如果您以前没有使用它，可能需要查看它，它会对您编码的设计有很大帮助。

对于以下示例，我将moves-out添加到ul进行测试，您可以检查console.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 -->

Answer 3

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

链接首次点击后，使链接无法点击，等待转换结束+ 1s，然后再次点击链接

3 个答案: