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

我试图创建一个插件方式的下拉菜单。我很熟悉将自己编写为解决方案，但是我从未创建过插件，所以我正在努力学习如何做到这一点，因此提升了我作为jQuery开发人员的水平。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中执行它似乎并不高雅 - 我将如何在插件内处理这个问题？

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

另外，我将如何使它，如果我点击下拉内的链接，我可以强制菜单隐藏（这将是一个模式弹出窗口）。

中的application.js

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

加入这个现在感觉又非常unelegant和可能应该在其他地方放。请教育我！

来源

2011-02-11 Daniel Fischer

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

或者只是使用菜单的blur事件。认为即使在非输入元素上也可以工作。

来源

2011-02-11 10:42:12

我不喜欢$（窗口）。点击？ – 2012-01-27 21:50:17

为了模糊工作，我需要菜单在呈现时接收焦点 - 如果它是通过单击父项（幸运的是这里是案例）打开它的作品。但它不是这样在我的情况下，并试图让它专注于$（myitem）.click（）或.focusin（）不适合我:-( – 2012-01-27 21:54:51

下面是一个例子：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。

编辑：这里是有两个列表的例子：因为当时什么，如果一些其它部件也做e.stopPropagation（）http://jsfiddle.net/5tgGq/3/

来源

2011-02-11 10:57:47

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

回答

相关问题