JS下拉菜单不关闭？

所以我在这里找到了这个小提琴：http://jsfiddle.net/8qPvp/4/ 我以为我只是为了个人教育的目的而使用它。我真的很新的JS，我注意到，打开的父母不会重新点击，就像它打开。这怎么解决？JS下拉菜单不关闭？

$(document).ready(function() { 
    $("li").click(function() { 
     $('li > ul').hide(); 
     $(this).children("ul").toggle(); 
    }); 
});

来源

2013-10-24 user2907241

也许这？只改变一下风格：P http://jsfiddle.net/MatthewDavis/4syjv/ –

几乎完美的，但我不能关闭菜单：/你可以让它像你点击任何其他地方，它关闭？ – user2907241

我对它：P，当它的工作，我会把它作为一个awnser –

这个怎么样：

$("li").click(function() { 
    $('li > ul').hide(); 
    $(this).children("ul").toggle(); 
}); 

$(document).click(function() 
{ 
    $('li > ul:visible').hide(); 
}) 

$('.menu li').click(function(e) 
{ 
    e.stopPropagation();   
})

所以默认情况下我做，只要点击任何地方，在文档中，你看到的菜单将被隐藏。但是，当您打开一个新菜单时（不会发生这种情况）（将会直接显示并隐藏）。所以当我想打开一个新的菜单时，我会发现一个异常，并且我将取消文档单击事件。
我使用event.stopPropagation()来取消事件。

jsFiddle

来源

2013-10-24 09:16:59 nkmol

谢谢，这个作品！但是现在我该如何添加一个css转换？悬停时，我只是使#div {height：10px; transition：height 1s;} #div：hover {height：100px;}对不对？或没有？那么无论如何，我不知道如何将javascript添加到javascript：/ – user2907241

好吧，这是一个完整的其他主题。很难一起使用这个jQuery和css，因为在css中没有任何onClick函数。当菜单列表可见时，您必须添加一个新类。但是我认为这会变得太“开箱即用”，我会建议先尝试一些simpels。 – nkmol

它看起来非常愚蠢，只有一个菜单刚刚弹出，因为页面上的其他任何内容都可以通过转换顺利进行动画。也许我只是做一个悬停菜单。 – user2907241

$(document).ready(function() { 
    $("li").click(function() { 
     $('li > ul').hide(); 
     $(this).children("ul").toggle(); 
    }).mouseleave(function(){ 
     $(this).children("ul").hide(); 
    }); 
});

检查这个小提琴http://jsfiddle.net/Aveendra/8qPvp/18/

来源

2013-10-24 08:51:25

mouseleave使菜单混淆。 –

现在它可以随机悬停，并在浏览到下一个菜单时保持菜单打开状态。 – user2907241

抱歉，我错误地使用了mouseleave中的toggle（）。它应该是hide（）。 –

JS下拉菜单不关闭？

回答

相关问题