关闭菜单，点击关闭菜单本身

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

来源

2012-06-30 Phil Owen

欢迎！请在http://jsfiddle.net上做一个功能正常的演示 –

以防万一你没有注意到它...你有$（document）.one（'click'...应该是，不是一个。 –

如果你真的想要使用jQuery，你可以使用'$ .mouseleave（）'来处理开启/关闭。 –

我希望你仍然在寻找解决方案。下面是我还增加了几个事件，它开启或关闭

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

对不起，这依赖于jQuery的时候，你可以用这个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))

一个工作演示。懒得写一个本地版本:)。此外，这不是在IE中测试，但不应该太难以使它工作在那些，如果它不。

来源

2012-07-05 03:21:54 SMathew

关闭菜单，点击关闭菜单本身

回答

相关问题