如何使下拉菜单在单击而非悬停时打开/关闭？

Question

我对JavaScript和Ajax/JQuery非常陌生，一直在努力尝试让一个脚本能够点击而非悬停来打开和关闭下拉菜单。

目标菜单可以在http://www.gamefriction.com/Coded/上找到，它是位于页眉下方右侧的黑色菜单。我希望它像稍后更低的另一个菜单（淡灰色，位于“选择分区”模块中）一样打开和关闭。

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

我还导入了JQuery，这可以在以上链接的源代码中找到。 我的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>

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

我的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&ntilde;ol</a></li>
         <li><a href="?iw_lang=fr">Fran&ccedil;ais</a></li>
         <li><a href="?iw_lang=it">Italiano</a></li>
        </ul>
       </li>
      </ul> 
     </div>

谢谢！

- Meta

---

欢迎。一个重要的点是，你手头的不是Java，而是JavaScript。除了一些语法上的相似之处和名称外，它们并不相同，实际上非常不同。 - Kobi

Answer 1

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

使用切换将需要您单击以打开，然后再次单击以关闭。

- RobertPitt

---

到目前为止，这个方案完美地解决了问题。非常感谢！昨晚在你最初发布它后，我尝试过，但是无法使其工作。 - Meta

很高兴能帮到你，只要记住 jQuery 文档非常简单，你总能在那里找到好的答案。 - RobertPitt

Answer 2

我会这样做...

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

然后，在CSS中添加以下内容：

.active { display: block; }

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

同时，请确保在您的CSS中，子导航<ul>默认具有"display: none;"。

这样做将使得在#lang-selector中单击一个<li>标签，但不是任何子导航<ul>标签，将打开或关闭子导航，具体取决于其当前状态。

如果您担心默认情况下在子导航上使用"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; }

在这种情况下，<ul>默认显示，然后在文档加载时，jQuery将“hidden”类添加到所有<ul>中以隐藏它们，然后在单击<li>时，它会切换隐藏和活动类，显示或隐藏它们。

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

- RussellUresti

---

似乎无法通过这两种方法中的任何一种来在单击时显示菜单。 - Meta

好的，你不能只是复制粘贴这个代码，你还必须修改你自己的代码... 这里有一个链接展示了它的工作原理。http://jsbin.com/irota/2/edit - RussellUresti

我明白了。实际上，这是我第一次在网站上使用JavaScript或jQuery，我对它们完全没有了解。昨天尝试时，它甚至无法显示出黑暗图像以供单击。 - Meta

Answer 3

搜索此代码：$("#lang-selector li").hover，并将其替换为：

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

- sushil bharwani

---

我已经尝试过了，虽然它可以打开下拉菜单，但是一旦打开后就无法关闭。你必须刷新页面才能消除下拉菜单。 - Meta

这样做行不通，因为hover（）接受两个函数，而click只接受一个函数。 - RussellUresti

Answer 4

如果您需要在单击事件中使用两个功能，请尝试使用.toggle。

我正在使用这个：

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

这使我能够在这两个功能上做更多的事情，而不仅仅是使用其1个函数进行点击。

- Havihavi

Answer 5

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

Jquery 事件

了解更多关于 Jquery 中的事件！

附：sushil bharwani（投票支持），他说得对，只需将 .hover 改为 .click。

- Zuul

---

不，更改它是行不通的，hover() 接受两个函数（in 和 out），而 click() 只接受一个。 - RussellUresti

好的，正如RobertPitt所说，使用toggle事件处理程序！ 使用click事件，用户必须点击才能打开，再次点击才能关闭... 这与hover完全不同... - Zuul