jQuery Dropdown Plugin - 有支持的插件吗?

发布于 2024-12-19 00:09:38 字数 279 浏览 0 评论 0原文

我正在寻找 jQuery 的下拉插件,因为我的应用程序有多个下拉菜单。所需的功能与 StackOverflow 配置文件插入符号的功能非常相似。

我发现了这个: http://davidwalsh.name/twitter-dropdown-jquery

但鉴于这不是一个插件,感觉很乱。有人知道有一个插件可以让我干燥网站上的下拉菜单吗?

谢谢

I'm looking for a dropdown plugin for jQuery as my app has multiple dropdowns. The functionality required is very similar to that of the StackOverflow profile caret.

I found this: http://davidwalsh.name/twitter-dropdown-jquery

But given that's not a plugin it feels very messy. Anyone know of a plugin that would allow me to DRY dropdowns on my site?

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

最单纯的乌龟 2024-12-26 00:09:38

我稍微清理了代码并将其做成插件式的。不是很优雅(代码一开始就不太漂亮),但它应该可以工作:

jQuery.fn.twitterMenu = function() {
    return this.each(function() {
        var dropdown = $(this);
        var menu = dropdown.next('div.dropdown-menu');
        var parent = dropdown.parent();

        var activeClass = 'dropdown-active';
        var showingDropdown = false;
        var showingDropdown, showingMenu, showingParent;

        dropdown.click(function(e) {
            e.stopPropagation();
            e.preventDefault();

            if (showingDropdown) {
                dropdown.removeClass(activeClass);
                showingMenu.hide();

                showingDropdown = false;
            } else {
                showingDropdown = true;
                showingMenu = menu;
                showingParent = parent;

                menu.show();
                dropdown.addClass(activeClass);
            }
        });

        $('body').click(function(e) {
            if (showingParent) {
                var parentElement = showingParent[0];

                if (!$.contains(parentElement, e.target) || !parentElement == e.target) {
                    hideMenu();
                }
            }
        });
    });
};

您可以像这样使用它:

$(document).ready(function() {
    $('.dropdown').twitterMenu();
});

演示:http://jsfiddle.net/DraY4/9/

I cleaned up the code a bit and made it plugin-ish. Not very elegant (the code wasn't pretty to begin with), but it should work:

jQuery.fn.twitterMenu = function() {
    return this.each(function() {
        var dropdown = $(this);
        var menu = dropdown.next('div.dropdown-menu');
        var parent = dropdown.parent();

        var activeClass = 'dropdown-active';
        var showingDropdown = false;
        var showingDropdown, showingMenu, showingParent;

        dropdown.click(function(e) {
            e.stopPropagation();
            e.preventDefault();

            if (showingDropdown) {
                dropdown.removeClass(activeClass);
                showingMenu.hide();

                showingDropdown = false;
            } else {
                showingDropdown = true;
                showingMenu = menu;
                showingParent = parent;

                menu.show();
                dropdown.addClass(activeClass);
            }
        });

        $('body').click(function(e) {
            if (showingParent) {
                var parentElement = showingParent[0];

                if (!$.contains(parentElement, e.target) || !parentElement == e.target) {
                    hideMenu();
                }
            }
        });
    });
};

You use it like this:

$(document).ready(function() {
    $('.dropdown').twitterMenu();
});

Demo: http://jsfiddle.net/DraY4/9/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文