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中进行过测试，但是如果没有，那么不应该太难以使它适用于那些。

关闭菜单单击关闭菜单本身

1 个答案: