如何运行不同的代码，无论单击一次还是两次(不谈论双击)

Question

我的菜单旨在在同一长页中导航。默认情况下只能看到一个菜单项(对应于目前正在查看的页面的部分(。单击该可见菜单项显示整个菜单。

这是一个技巧：菜单显示后，菜单项上的另一键单击(不讨论双击此处(应该触发其他内容，即滚动到与该项目相关的区域(此处关闭主题(。仅用jQuery就可以实现吗？

以某种方式我需要使alert()零件仅在第二次点击时执行，而不是第一个。

到目前为止，这是我的代码：https：//jsfiddle.net/v6rls1rg/

jQuery(document).ready(function($) {
  $('.current').click(function() {
    $('.menu_item').fadeIn();
  });
  $('.menu_item').click(function() {
    alert('test');
  });
});

.menu_item {
  display: none;
}
.current {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="menu_item">
    Item 1
  </div>
  <div class="menu_item current">
    Item 2
  </div>
  <div class="menu_item">
    Item 3
  </div>
</div>

Answer 1

最简单的方法可以计算单击(或其他任何问题(是使用计数器变量：

<script>
    $(document).ready(function()
    {
        var counter = 0,        //its traditional to set this to 0 - but can be whatever you want
            example = [1, 2, 3] //overall count is 3
        $.each('.class', function()
        {
            counter++;
        });
        alert(counter); //should alert 2 (as counter started on 0)
    });
</script>

这是计数器的一个基本示例 - 在您的情况下是第二次单击(或之后的多次单击(，您可以执行IF语句(或Switch语句(如果多于一个((，则类似：

<script>
    $(document).ready(function()
    {
        var counter = 0;
        $('#someBtn').on('click', function()
        {
            counter++;
            switch (counter)
            {
                case 1:
                    actionOne();            
                    break;
                case 2:
                    actionTwo();
                    break;
            }
        });
    });
</script>

这应该是您要寻找的。

注意：counter--可用于计算

Answer 2

将第二个click功能放置在.current click功能中。现在，第二次点击功能将被触发，因为它仅在单击.current之后运行。

这样做后，您会注意到alert()将运行两次。您可以通过将$('.menu_item').click()替换为$('.menu_item').on('click')

来解决此问题。

小提琴

jQuery(document).ready(function($) {
  $('.current').click(function() {
    $('.menu_item').fadeIn();
    
  $('.menu_item').on("click", function() {
    alert('test');
  });
  });
});

.menu_item {
  display: none;
}
.current {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="menu_item">
    Item 1
  </div>
  <div class="menu_item current">
    Item 2
  </div>
  <div class="menu_item">
    Item 3
  </div>
</div>

Answer 3

使用自定义功能链接，您可以在完成jQuery的淡入后立即分配点击事件。

jQuery(document).ready(function($) {
  //https://stackoverflow.com/questions/37992651/jquery-chaining-custom-functions
  $.fn.activateClicks = function() {
    isFadedIn = true;
    $('.menu_item').click(function() {
      alert('test');
    });
    return this; //The magic statement
  }
  var isFadedIn = false;
  $('.current').click(function() {
    if(!isFadedIn){
      $('.menu_item').fadeIn().activateClicks();
    }
  });
});

Answer 4

您可以使用一个点击处理程序，然后确定它在哪个状态中。

我建议不要分离/重新签署事件处理程序，因为在实践中，您实际上不必担心在隐藏元素上进行点击。

jQuery(document).ready(function($) {
  $('.menu_item').click(function() {
    $siblings = $(this).siblings(".menu_item");
    if ($siblings.filter(":visible").length) { // more items visible
      $siblings.fadeOut().removeClass("current");
    } else { // it's the only visible one
      $siblings.fadeIn();
    }
    // Always select the clicked element
    $(this).addClass("current");
  });
});

.menu_item {
  display: none;
}
.current {
  display: block;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="menu_item">
    Item 1
  </div>
  <div class="menu_item current">
    Item 2
  </div>
  <div class="menu_item">
    Item 3
  </div>
</div>