使用jquery下拉插件

时间:2012-09-12 13:41:36

标签: jquery plugins drop-down-menu

我正在使用列表处理下拉插件。我得到了它的工作,除了如果我在同一页面上有多个下拉列表我想关闭所有其他的,除了我触发关闭的那个。

这就是我所拥有的:

(function($){

  $.fn.dropDown = function(options) {
      var defaults = {
          wrapper: 'ul'
      }

    var settings = $.extend({}, defaults, options);


    $(this).find(settings.wrapper).hide();
    $(this).css("cursor","pointer");


        $(this).click(function(event) {
            elem= $(this);
            elem.find(settings.wrapper).toggle();
            elem.find("span").toggleClass("menuOpen");
            event.preventDefault();
            event.stopPropagation();
        });

        $(document).click(function() {  
                elem.find("span").removeClass("menuOpen");  
                elem.find(settings.wrapper).hide(); 
                elem.find(settings.wrapper).find("ul").show();  
        });
  };

})(jQuery);

,插件就像这样调用:

$('.dropdown').dropDown();

有什么想法吗?

提前致谢, 何

1 个答案:

答案 0 :(得分:0)

不久前我做了类似的事。

使代码可以选择所有其他菜单的方法是在运行时为它们提供一个自定义类,如下所示:

$(this).addClass("__my_menu");

通过这种方式,您可以处理插件设置的菜单。 因此,当您想要关闭除当前菜单之外的所有菜单时,您需要做的就是:

$('.__my_menu').not($(this)).hide();

另一点是,在document点击处理程序中,var elem未设置,因此它永远不会执行任何操作。您应该使用$(this)代替。

进一步阅读:

使用$.off$.on代替$.click(在jQuery 1.7及更高版本上):http://api.jquery.com/on/

$.not和其他过滤方法:http://api.jquery.com/category/traversing/filtering/

希望这会有所帮助,祝你好运。