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>

谢谢！

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

然后，在CSS中添加：

.active { display: block; }

<强>＆LT;＆LT;编辑：从“.active”类中删除了“ul”以获得CSS渲染效率＆gt;＆gt;

还要确保子导航＆lt; ul＆gt;有“display：none;”在你的CSS默认情况下。

这样可以点击＆lt; li＆gt; ＃lang-selector中的标记，但不包含在任何子导航＆lt; ul＆gt;中标签将打开或关闭子导航，具体取决于它的当前状态。

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

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

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

然后还将其添加到CSS

.hidden { display: none; }

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

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

Answer 4

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

Jquery Events

了解有关Jquery事件的更多信息！

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

Answer 5

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

我正在使用这个：

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

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

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

5 个答案: