javascript - 通过单击关闭菜单本身来关闭菜单

Question

在 JavaScript 方面我并不是最好的，并且一直在寻找解决方案。我在这里看到过类似的问题，但是当我尝试在我的情况下实现它时，它要么会破坏菜单，要么就没有什么区别。

我正在尝试获取一个菜单(通过单击打开)，不仅可以通过重复单击父菜单选项卡来关闭，还可以通过单击菜单外(即任何地方)来关闭。

我的代码是:

var toggleUpdatesPulldown = function(event, element, user_id) {
    if( element.className=='updates_pulldown' ) {
        element.className= 'updates_pulldown_active';
        showNotifications();
    } else {
        element.className='updates_pulldown';
    }
}

此代码段位于更多 JavaScript 的中间，这是默认的工作版本。用户的单击会更改菜单容器的类名称，这决定了它是否显示。从这里的另一篇文章中，我尝试实现以下内容，但没有成功尝试并允许单击关闭来更改类名称:

var toggleUpdatesPulldown = function(event, element, user_id) {
    if( element.className=='updates_pulldown' ) {
        element.className= 'updates_pulldown_active';
        showNotifications();
    } else {
        element.className='updates_pulldown';
    }
    
    ev.stopPropagation();
    
    $(document).one('click', function() {
        element.className='updates_pulldown';
    });
} 

对于解决这个问题有什么建议吗？我想学习更多 JavaScript，因为我似乎越来越多地使用它。

Answer 1

我希望您仍在寻找解决方案。这是此 http://jsfiddle.net/sU9ZJ/6/ 的工作演示

(function(win, doc) {
  var lis = $('#menu>ul>li>a').on('click', function(e) {
    e.preventDefault();
    var a = $(this);
    var li = $(this).parent();
    function close(dev) {
      if (!(dev && li.has(dev.target)[0])) {
        li.addClass('inactive').removeClass('active');
        doc.off('click', close);
        a.trigger('close');
      }
    }
    function open(dev) {
      li.addClass('active');
      doc.on('click', close);
      a.trigger('open');
    }
    if (li.hasClass('active')) {  close() } 
    else {  open(); }        
  })      
})(this, $(document))

我还添加了一些您可以在打开或关闭时使用的事件

$('#menu>ul>li>a').on('open', function(e) { 
     console.log('menu open', this) 
}).on('close', function(e) { 
      console.log('menu closed', this) 
})

抱歉，这取决于 jQuery。懒得写原生版本:)。此外，这还没有在 IE 中进行测试，但如果不能在 IE 中运行，应该不会太难。