1

当谈到 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，因为我似乎越来越多地使用它。

4

1 回答 1

0

我希望您仍在寻找解决方案。这是这个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 中测试，但如果没有，应该不会太难让它在那些上工作。

于 2012-07-05T03:21:54.107 回答