Javascript 显示带有jQuery的下拉元素

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

目前功能区正在使用下拉列表，但我有一个问题

单击相应的图标时会显示下拉列表，但如果单击文档中的任何位置，我不知道如何隐藏它

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

我在这里创作了一把小提琴：

下面是打开它的代码：

$("#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");
        });
    }
});

$（“#OfficeUI.ribbon.tabs>ulli[role=tab].contents.group.icongroup.icon”）.children（）.each（函数（索引）{
if（$（this）.hasClass（“菜单”））{
var元素=$（此）；
$（''）.appendTo（$（this.prev（））；
//向包含菜单的元素添加单击事件。
$（this）.parent（）。单击（函数（））{
$（元素）.toggle（）；
$（元素）.parent（）.addClass（“活动”）；
});
}
});

只需单击功能区（第二个）上的“新建项目”按钮，然后将打开下拉菜单

提前谢谢

---

Kevin

在显示事件侦听器时添加一个基本上是

$(document).on('click', function(){
    //hide dropdown
});

隐藏后，您将希望销毁此事件侦听器

没有经过测试。。。像这样的

$("#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();
            var dd = $(element).parent();
            dd.addClass("active");
            hideDD = function(){
               dd.removeClass('active');
               $(document).removeEventListener('click',hideDD);
            };
            $(document).addEventListener('click',hideDD);

        });
    }
});

$（“#OfficeUI.ribbon.tabs>ulli[role=tab].contents.group.icongroup.icon”）.children（）.each（函数（索引）{
if（$（this）.hasClass（“菜单”））{
var元素=$（此）；
$（''）.appendTo（$（this.prev（））；
//向包含菜单的元素添加单击事件。
$（this）.parent（）。单击（函数（））{
$（元素）.toggle（）；
var dd=$（元素）.parent（）；
dd.addClass（“活动”）；
hideDD=函数（）{
dd.removeClass（“活动”）；
$（文档）。removeEventListener（'单击'，隐藏）；
};
$（文档）.addEventListener（'单击'，隐藏）；
});
}
});

在文档上绑定单击事件，检查单击的目标不是图标，然后根据需要隐藏元素

jQuery(document).on("click",function(e){
   if( !jQuery(e.target).hasClass("icon") ) {
       //hide ribbon code here
   }
});

---

我们可以利用

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();
    });
});

---

请参见此处更新的fiddle:

只需在元素的焦点输出事件中编写相关代码

谢谢您的快速响应，但我对jQuery不是很熟悉。请你再多给我一些信息好吗。也许可以用一把小提琴来告诉我你的意思？几乎可以用了。未删除活动类。应该如何做到这一点（在文档中单击），或者是否有其他解决方案？如果我知道它在工作，我将是一个非常快乐的人：-）只需更改这行：

$（'.menu'）.hide（）到此：
$（'.menu'）.hide（）.parent（）.removeClass（'active'）这正是我尝试的，但它不起作用，老实说，我不知道为什么不？你能快看一下吗？它对我有用，请解释一下。你在哪里点击？如果您的意思是单击菜单项本身不会删除活动类，那么是的，这是一个需要解决的问题。如果您的意思是单击其他位置不会删除该类。。。这很奇怪。单击文档中的任何位置都可以，但正如您提到的，单击下拉列表中的某个项目都不起作用。有解决问题的办法吗？
$("#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');
    });
});