Question

$( document ).on( "vclick", '#icon', function() {

    $("#navigation").animate({height: 'toggle'}, 600, "linear");

});

您好，

我目前有一个汉堡包菜单，除了一件事外，它的功能完美无缺。如果我单击#icon 10次，它将执行代码10次，我想知道它是否可以使它在完成时只能被点击并删除整个队列系统。

提前致谢。

Answer 1

你可以做一些事情：

的JavaScript

var animating = false;
$(document).on( "vclick", '#icon', function() {
   if(!animating) {
      animating = true;
      $("#navigation").animate({height: 'toggle'}, 600, "linear", function() {
         animating = false;
      });
   }
});

Answer 2

以Arg0n的答案为灵感，我创建了一个jQuery插件。

插件使用了闭包，这意味着该函数返回另一个函数，以便变量在内部而不是在外部;在全球范围内。

(function($) {
  $.fn.collapser = function(targetSelector, ms, type) {
    this.on('click', function() {
      var animating = false;
      return (function() {
        if (!animating) {
          animating = true;
          $(targetSelector).animate({
            height: 'toggle'
          }, ms, type, function() {
            animating = false;
          });
        }
      }());
    });
  }
}(jQuery))

$('#icon').collapser('#navigation', 600, 'linear');

body {
  background: #222;
}

#page {
  background: #DDD;  
}

#icon {
  width: 4em;
  height: 4em;
  line-height: 4em;
  text-align: center;
  margin-bottom: 1em;
  background: #446;
  color: #FFF;
  font-weight: bold;
  cursor: pointer;
  border: thin solid #AAD;
}

ul#navigation {
  list-style-type: none;
  margin: 0;
  padding: 0.25em;
  background: #E7E7F7;
}

ul#navigation li {
  display: inline-block;
  width: 6em;
  height: 2.5em;
  line-height: 2.5em;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #F7F7FF;
}

#content {
  background: #FFF;
  padding: 1em;
  height: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="page">
  <div id="icon">Icon</div>
  <ul id="navigation">
    <li>Home</li>
    <li>Articles</li>
    <li>Historic</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <div id="content">
    Hello World
  </div>
</div>

您还可以取消绑定并重新绑定事件。这样您就不必创建任何状态变量。这可能是处理此问题的最佳方式。

(function($) {
  $.fn.collapser = function(targetSelector, ms, type) {
    var eventName = 'click';
    var fn = function(source) {
      $(source).unbind(eventName, fn);
      $(targetSelector).animate({
        height: 'toggle'
      }, ms, type, function() {
        $(source).bind(eventName, fn);
      });
    };
    this.on(eventName, function() {
      fn.call(this);
    });
  }
}(jQuery))

$('#icon').collapser('#navigation', 1600, 'linear');

body {
  background: #222;
}

#page {
  background: #DDD;  
}

#icon {
  width: 4em;
  height: 4em;
  line-height: 4em;
  text-align: center;
  margin-bottom: 1em;
  background: #446;
  color: #FFF;
  font-weight: bold;
  cursor: pointer;
  border: thin solid #AAD;
}

ul#navigation {
  list-style-type: none;
  margin: 0;
  padding: 0.25em;
  background: #E7E7F7;
}

ul#navigation li {
  display: inline-block;
  width: 6em;
  height: 2.5em;
  line-height: 2.5em;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #F7F7FF;
}

#content {
  background: #FFF;
  padding: 1em;
  height: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="page">
  <div id="icon">Icon</div>
  <ul id="navigation">
    <li>Home</li>
    <li>Articles</li>
    <li>Historic</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <div id="content">
    Hello World
  </div>
</div>

Answer 3

您可以通过隐藏#icon来使用解决方法，直到动画完成，然后再次显示：

$( document ).on( "vclick", '#icon', function() {
    var _this = $(this);

    //Hide the icon
    $(this).hide();

    $("#navigation").animate({height: 'toggle'}, 600, "linear", function() {
          //Show the icon after animation
          _this.show();
    });

});

希望这有帮助。

jQuery汉堡菜单 - 调用多个事件

3 个答案: