显示带有jQuery的下拉元素

Question

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

目前功能区正在使用下拉菜单，但我遇到问题。

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

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

我已经在这里创造一个小提琴：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：你应该好好利用链接，所以我结合了两行引用$（元素）到一个单一的一个:)这是jQuery的最强大的功能之一，所以发疯：d

---

更新：OP要求检测菜单项本身内的点击事件。这需要在某个地方存储切换状态，我选择使用data对象，然后在决定打开/关闭菜单之前嗅探切换状态（并执行其他操作，例如从父母添加/删除班级）：

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

见更新小提琴这里：http://jsfiddle.net/teddyrised/mwCCt/5/

Answer 2

添加事件侦听器，当你表现出来的，基本上是

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

     }); 
    } 
}); 

Answer 3

绑定文档上的单击事件，che CK的点击的目标不是图标，然后隐藏在需要

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

Answer 4

简单地写在元素的合焦了事件的相关代码