javascript - 使用 jQuery 显示下拉元素

Question

目前我正在用 Html、css 和 javascript 重新创建 Office 2013 功能区。 这是我的第一种方法，所以不要根据 css/html/js 代码来评判我。

目前功能区正在处理下拉菜单，但我遇到了问题。

点击相应的图标会出现下拉菜单，但我不知道在文档的任何地方点击怎么隐藏。

我可能会想出一个解决方案，但我不太确定这是否是一个好方法。 有人可以看看并给我一个很好的解决方案来完成这个吗？

我在这里创建了一个 fiddle :http://jsfiddle.net/Complexity/mwCCt/

这是打开它的代码:

$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
    if ($(this).hasClass("menu")) {

        var element = $(this);

        $('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());

        // Add a click event to the element that contains a menu.
        $(this).parent().click(function() {
            $(element).toggle();
                        $(element).parent().addClass("active");
        });
    }
});

只需单击功能区(第二个)上的“新元素”按钮，然后将打开下拉菜单。

提前致谢。

凯文

Answer 1

我们可以利用 stopPropagation() 函数:

$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
    if ($(this).hasClass("menu")) {

        var element = $(this);

        $('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());

        // Add a click event to the element that contains a menu.
        $(this).parent().click(function(e) {
            // Stops click event from bubbling up to $(document)
            e.stopPropagation();

            // Do stuff
            $(element).toggle().parent().addClass("active");
        });
        }
    });

    // Bind click event to document, to hide any .menu elements that are open
    $(document).click(function() {
        $('.menu').hide();
    });
});

p/s:你应该利用链接，所以我将引用 $(element) 的两行合并为一行 :) 这是 jQuery 最强大的功能之一，所以疯狂吧 :D

---

更新:OP 还要求检测菜单项本身内的点击事件。这需要将切换状态存储在某个地方，我选择使用 data 对象，并在决定打开/关闭菜单之前嗅探点击时的切换状态(并执行其他操作，例如添加/从 parent 那里删除类(class)):

$("#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon").children().each(function(index) {
    if ($(this).hasClass("menu")) {

        var element = $(this);

        $('<i class="fa fa-sort-asc arrow"></i>').appendTo($(this).prev());

        // Add a click event to the element that contains a menu.
        $(this).parent().click(function(e) {
            e.stopPropagation();

            // Check toggle state
            if(!$(this).data('state') || $(this).data('state') == 0) {
                // If menu is closed, show it
                $(element).show().parent().addClass('active');

                // Update state
                $(this).data('state', 1);

            } else if ($(this).data('state') == 1) {
                // If menu is already open, close it
                $(element).hide().parent().removeClass('active');

                // Update state
                $(this).data('state', 0);
            }

        });
    }
});

$(document).click(function() {
    $('.menu').each(function() {
        $(this).hide().parent().data('state', 0).removeClass('active');
    });
});

请在此处查看更新 fiddle :http://jsfiddle.net/teddyrised/mwCCt/5/