Javascript 如何让下拉菜单在点击时打开/关闭而不是悬停？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2937547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get dropdown menu to open/close on click rather than hover?
提问by Meta
I am very new to javascript and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover.
我对 javascript 和 ajax/jquery 非常陌生，并且一直在努力尝试让脚本在点击而不是悬停时打开和关闭下拉菜单。
The menu in question is found on http://www.gamefriction.com/Coded/and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module).
有问题的菜单可在http://www.gamefriction.com/Coded/上找到，是标题下方右侧的深色菜单。我希望它像位于它下方的另一个菜单一样打开和关闭（它是浅灰色的，位于“选择部门”模块中）。
The gray menu is part of a menu and the language menu is not.
灰色菜单是菜单的一部分，而语言菜单不是。
I have a jquery import as well which can be found in the view source of the above link.
我也有一个 jquery 导入，可以在上述链接的视图源中找到。
My Javascript Code:
我的Javascript代码：
<script type="text/javascript">
/* Language Selector */
$(function() {
$("#lang-selector li").hover(function() {
$('ul:first',this).css('display', 'block');
}, function() {
$('ul:first',this).css('display', 'none');
});
});
$(document).ready(function(){
/* Navigation */
$('.subnav-game').hide();
$('.subnav-game:eq(0)').show();
$('.preorder-type').hide();
$('.preorder-type:eq(3)').show();
});
</script>
My CSS:
我的CSS：
#lang-selector
{
font-size: 11px;
height: 21px;
margin: 7px auto 17px auto;
width: 186px;
}
#lang-selector span
{
color: #999;
float: left;
margin: 4px 0 0 87px;
padding-right: 4px;
text-align: right;
}
#lang-selector ul
{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#lang-selector ul li a
{
padding: 3px 10px 1px 10px;
}
#lang-selector ul, #lang-selector a
{
width: 186px;
}
#lang-selector ul ul
{
display: none;
position: absolute;
}
#lang-selector ul ul li
{
border-top: 1px solid #666;
float: left;
position: relative;
}
#lang-selector a
{
background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
color: #666;
display: block;
font-size: 10px;
height: 17px;
padding: 4px 10px 0 10px;
text-align: left;
text-decoration: none;
width: 166px;
}
#lang-selector ul ul li a
{
background: #333;
color: #999;
}
#lang-selector ul ul li a:hover
{
background: #c4262c;
color: #fff;
}
My HTML:
我的 HTML：
<div id="lang-selector">
<ul>
<li>
<a href="#">Choose a Language</a>
<ul>
<li><a href="?iw_lang=en">English</a></li>
<li><a href="?iw_lang=de">Deutsch</a></li>
<li><a href="?iw_lang=es">Español</a></li>
<li><a href="?iw_lang=fr">Français</a></li>
<li><a href="?iw_lang=it">Italiano</a></li>
</ul>
</li>
</ul>
</div>
Thanks!
谢谢！
回答by RobertPitt
$(function() {
$("#lang-selector li:first").click(function(){
$('ul:first',this).toggle();
})
});
Using toggle will require you to click to open then reclick to close
使用切换将需要您单击打开然后重新单击关闭
回答by sushil bharwani
search this $("#lang-selector li").hoverand replace with
搜索这个$("#lang-selector li").hover并替换为
$("#lang-selector li").click
回答by RussellUresti
I would do something like this...
我会做这样的事情......
$(function() {
$("#lang-selector > li").click(function() {
$('ul:first',this).toggleClass('active');
});
});
And, then, in the CSS add this:
然后，在 CSS 中添加：
.active { display: block; }
<< EDIT: Removed "ul" from ".active" class for CSS rendering efficiency >>
<< 编辑：从“.active”类中删除“ul”以提高 CSS 渲染效率 >>
Also make sure that the sub-nav <ul> has "display: none;" on it by default in your CSS.
还要确保子导航 <ul> 有“display: none;” 默认情况下，在您的 CSS 中。
This will make it so that clicking an <li> tag in #lang-selector, but not in any sub-nav <ul> tags will either open or close the sub-nav, depending on it's current state.
这将使得点击 #lang-selector 中的 <li> 标签，而不是任何子导航 <ul> 标签将打开或关闭子导航，具体取决于它的当前状态。
If you're worried about the accessibility of having "display: none" on the sub-nav by default, you can do something like this...
如果您担心默认情况下在子导航上具有“显示：无”的可访问性，您可以执行以下操作...
$(function() {
$("#lang-selector li ul").addClass("hidden");
$("#lang-selector li").click(function(e) {
e.preventDefault();
$('ul:first',$(this)).toggleClass('hidden active');
});
});
<< EDIT: Altered selectors to match example provided, turned "this" into jQuery object. >>
<< 编辑：改变选择器以匹配提供的示例，将“this”转换为 jQuery 对象。>>
And then also add this to the CSS
然后也将它添加到 CSS
.hidden { display: none; }
In this scenario, you have the <ul> showing by default, then when the document loads, jQuery adds the "hidden" class to all of them to hide them, then on the click of the <li> it will toggle the hidden and active classes, displaying them or hiding them.
在这种情况下，默认情况下显示 <ul>，然后当文档加载时，jQuery 将“隐藏”类添加到所有它们以隐藏它们，然后单击 <li> 它将切换隐藏和活动类，显示或隐藏它们。
You'll also need to remove your current "display: none" from your #lang-selector ul ul in CSS, otherwise it takes priority over the hidden / active classes.
您还需要从 CSS 中的 #lang-selector ul ul 中删除当前的“display: none”，否则它优先于隐藏/活动类。
回答by Havihavi
if you need two functions for a click event, try .toggle
如果点击事件需要两个函数，请尝试 .toggle
i'm using this:
我正在使用这个：
$('.triggerlist').toggle(function(e) {
e.preventDefault();
$(this).find('ul').fadeIn();
},function() {
$(this).find('ul').fadeOut();
});
Which allows me to do more stuff on the 2 functions than just the .click with its 1 function.
这让我可以在 2 个函数上做更多的事情，而不仅仅是 .click 的 1 个函数。
回答by Zuul
.hover, .click, .something, are all triggers, view this link:
.hover、.click、.something，都是触发器，查看这个链接：
to learn more about events in Jquery!
了解有关 Jquery 中事件的更多信息！
Ps: sushil bharwani (vote it), is right, just change your .hover by the .click
Ps：sushil bharwani（投票），是对的，只需通过 .click 更改您的 .hover
