Question

我正在尝试以插件方式创建一个下拉菜单。我熟悉自己编写解决方案的脚本，但我之前从未创建过插件，所以我正在努力学习如何做到这一点，从而提高了我作为jQuery开发人员的水平。

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

我在离开时遇到了麻烦。我试图将它绑定到document.click，但当然显示菜单然后隐藏它，因为没有任何东西确保它必须首先显示。我该怎么做？

我如何制作它，以便菜单只有在您点击它之外才会显示？

的application.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');
  // });
});

silly_drop_down.js

(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中执行它似乎并不优雅 - 我如何在插件中处理它？</ p>

注意：我可能有多个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);
                }
            });
        });
    },

希望有所帮助。我非常确定您也可以使用多个元素，因为您只对已经show编辑的元素使用了hide和each方法。< / p>

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

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

2 个答案: