如何让下拉菜单在点击时打开/关闭而不是悬停？

Posted 2023-03-06

【中文标题】如何让下拉菜单在点击时打开/关闭而不是悬停？

【英文标题】：How to get dropdown menu to open/close on click rather than hover?

【发布时间】：2011-02-25 14:58:18

【问题描述】：

我对 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>

谢谢！

【问题讨论】：

欢迎。重要的一点是，这不是 Java，而是 JavaScript。除了细微的语法相似性和名称外，它们并不相同，实际上非常不同。

【参考方案1】：

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

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

【讨论】：

到目前为止效果很好。万分感谢！当我昨晚在你最初发布它后尝试它时，我无法让它工作。

很高兴它对您有所帮助，请记住，jQuery 文档非常简单，您也总能在那里找到一个好的答案。

【参考方案2】：

我会做这样的事情......

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

然后，在 CSS 中添加：

.active  display: block; 

>

还要确保子导航

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

这将使点击#lang-selector中的

标签，而不是任何子导航标签将打开或关闭子导航，具体取决于它的当前状态。

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

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

>

然后也将其添加到 CSS 中

.hidden  display: none; 

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

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

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

【讨论】：

这两种方法似乎都无法在点击时显示菜单。

嗯，你不能只是复制和粘贴这个，你还必须改变你自己的代码......这是一个显示它工作的链接。 jsbin.com/irota/2/edit

我现在明白了。我真的对javascript或jQuery一无所知，因为这是我第一次在网站上使用它。当我昨天尝试这个时，它甚至不会显示要点击的暗图像。

【参考方案3】：

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

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

【讨论】：

我已经尝试过了，虽然它可以打开它，但打开后您无法关闭下拉菜单。您必须刷新页面才能摆脱下拉菜单。

这行不通，因为 hover() 接受两个函数，而 click 只接受一个。

【参考方案4】：

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

Jquery Events

详细了解 Jquery 中的事件！

Ps：sushil bharwani（投票）是对的，只需通过 .click 更改您的 .hover

【讨论】：

不，更改它不起作用，hover() 接受两个函数（输入和输出），而 click() 只接受一个。

好吧，正如 RobertPitt 所说，使用切换处理程序！通过点击，用户必须点击才能打开，必须点击才能关闭......这与悬停不同......

【参考方案5】：

如果单击事件需要两个函数，请尝试 .toggle

我正在使用这个：

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

这让我可以在 2 个函数上做更多的事情，而不仅仅是 .click 和它的 1 个函数。