jQuery 插件创作，点击事件帮助（下拉菜单）

Question

我正在尝试以插件方式创建一个下拉菜单。我熟悉自己编写解决方案的脚本，但我以前从未创建过插件，因此我正在尝试学习如何执行此操作，从而提高我作为 jQuery 开发人员的水平。

我正在尝试创建基本的下拉功能。你有一个链接。单击它，会出现一个链接下拉菜单。您单击链接（文档）外部，链接菜单就会消失。

我在离开的部分遇到了麻烦。我尝试将其绑定到 document.click 但当然会显示菜单然后隐藏它，因为没有什么可以确保它必须首先显示。我该怎么做？

如何使菜单仅在您单击菜单外部时显示后才隐藏？

application.jssilly_drop_down.js

jQuery(document).ready(function($){
  $("ul.drop-down").sillyDropDown();
  // failed attempt (shows and hides). Probably should go in plugin anyway.
  // $(document).click(function(){
  //   $("ul.drop-down").sillyDropDown('hide');
  // });
});

编辑

(function($){

  var methods = {

    init : function(options){
      return this.each(function(){
        var $this = $(this);
        var selector = $(this).children()[0];
        var link = $(selector);
        link.bind('click.silly', methods.show);
      });
    },
    show : function() {
      var $this = $(this);
      var menu = $this.siblings("ul");
      menu.slideDown("slow");
    },
    hide : function(){
      var $this = $(this);
      var menu = $this.children("ul");
      menu.slideUp("slow");
    }
  };

  $.fn.sillyDropDown = function(method){
    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.sillyDropDown' );
    } 
  };

})(jQuery);

html，如果重要的话

<ul id="project-settings" class="drop-down">
  <li>
    <a href="#">
      Settings
      <img src="/images/iconic/white/cog_alt_16x16.png" class="stale">
      <img src="/images/iconic/orange/cog_alt_16x16.png" class="hover">
    </a>
  </li>
  <ul style="display: none;">
    <div class="pointer"></div>
    <li class="first">
      <a href="#">Settings...</a>
    </li>
    <li>
      <a href="#">Collaborators...</a>
    </li>
    <li>
      <a href="#">Comments...</a>
    </li>
    <hr>
    <li>
      <a href="#">Delete Project</a>
    </li>
  </ul>
</ul>

（我意识到我过去问过类似的问题）。 我在 application.js 中执行了以下操作，

  $("ul.drop-down").sillyDropDown();
  $(document).bind("click.silly", function(e){
    var nav = $("ul.drop-down");
    var target = $(e.target);
    if (target.closest("ul.drop-down").length < 1){
      nav.sillyDropDown('hide');
      return;
    }
  });

这完成了工作。然而，在 application.js 中执行此操作似乎并不优雅 - 我将如何在插件内处理这个问题？

注意：我可能会有多个 ul.drop-down 实例 - 我在实现中是否缺少一些东西来处理这个问题？到目前为止，我的测试中只有一个。

另外，如果我单击下拉列表中的链接，我可以强制菜单隐藏（例如，这将是一个模式弹出窗口）。

现在在 application.js 中添加了这个

  $("ul.drop-down ul li a").click(function(e){
    $("ul.drop-down ul").hide();
    return;
  });

再次感觉，非常不优雅，可能应该放在其他地方。请赐教！

Answer 1

我会将菜单关闭操作绑定到 $(window).click，然后在下拉列表自己的点击事件中添加 e.stopPropogation()。这可以防止点击在 DOM 树中进一步向上冒泡到窗口元素。

或者只使用菜单的 blur 事件。认为这甚至适用于非输入元素。

Answer 2

这是一个示例：http://jsfiddle.net/5tgGq/1/。重要的部分在 init 中：

    init: function(options) {
        return this.each(function() {
            var self = this;
            $(this).click(methods.show);
            $(document).click(function(e) {
                if ($(self).has(e.target).length === 0) {
                    methods.hide.apply(self);
                }
            });
        });
    },

希望有帮助。我很确定您也应该可以接受多个元素，因为您只对已经 eachshow 和 hide 方法代码>编辑。

编辑：这是一个包含两个列表的示例： http://jsfiddle.net/5tgGq/3/