如何获得下拉菜单打开/关闭点击而不是hover？

我是javascript和ajax / jquery的新手，并且一直致力于尝试使用脚本来打开和关闭下拉菜单，而不是hover。

有问题的菜单可在http://www.gamefriction.com/Coded/上找到 ，它是标题右下方的暗菜单。 我想像它下面的另一个菜单一样打开和关闭它（它是浅灰色并且在“选择分区”模块中）。

灰色菜单是菜单的一部分，而语言菜单则不是。

我也有一个jquery导入，可以在上面链接的视图源中找到。

我的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(); });  

我的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://sofzh.miximages.com/javascript/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; } 

我的HTML：

 
 
 
 Choose a Language 
 
English
 
Deutsch
 
Español
 
Français
 
Italiano
 
 
 
  

谢谢！

Answer 1

  $(function() { $("#lang-selector li:first").click(function(){ $('ul:first',this).toggle(); }) }); 

使用切换将要求您单击以打开然后重新单击以关闭

Answer 2

我会做这样的事……

 $(function() { $("#lang-selector > li").click(function() { $('ul:first',this).toggleClass('active'); }); }); 

然后，在CSS中添加：

 .active { display: block; } 

<<编辑：从“.active”类中删除“ul”以获得CSS渲染效率>>

还要确保子导航

具有“display：none;” 在你的CSS默认情况下。

这将使得单击#lang选择器中的

标签，而不是任何子nav

标签中的
• 标签将打开或关闭子导航，具体取决于它的当前状态。

如果您担心默认情况下子导航栏上显示“display：none”的可访问性，您可以执行以下操作…

  $(function() { $("#lang-selector li ul").addClass("hidden"); $("#lang-selector li").click(function(e) { e.preventDefault(); $('ul:first',$(this)).toggleClass('hidden active'); }); }); 

<<编辑：改变选择器以匹配提供的示例，将“this”转换为jQuery对象。 >>

然后还将其添加到CSS中

 .hidden { display: none; } 

在这种情况下，您默认显示

，然后当文档加载时，jQuery将“隐藏”类添加到所有这些类以隐藏它们，然后点击
• 它将切换隐藏的和活动类，显示它们或隐藏它们。

您还需要从CSS中的＃lang-selector ul ul中删除当前的“display：none”，否则它优先于隐藏/活动类。

Answer 3

搜索这个$("#lang-selector li").hover并替换为

 $("#lang-selector li").click 

Answer 4

.hover，.click，.something，都是触发器，查看此链接：

Jquery事件

了解更多有关Jquery活动的信息！

Ps：sushil bharwani（投票），是的，只需通过.click改变你的.hover

Answer 5

如果您需要两个函数用于click事件，请尝试.toggle

我正在使用这个：

 $('.triggerlist').toggle(function(e) { e.preventDefault(); $(this).find('ul').fadeIn(); },function() { $(this).find('ul').fadeOut(); }); 

这使得我可以在2个函数上做更多的东西，而不仅仅是带有1个函数的.click。