如何获得下拉菜单打开/关闭点击而不是悬停？ [英] How to get dropdown menu to open/close on click rather than hover?

问题描述

我对javascript和ajax / jquery非常新，一直在努力获取一个脚本来打开和关闭点击下拉菜单，而不是悬停。

相关菜单位于 http://www.gamefriction.com/Coded/ 上，是标题下右侧的黑暗菜单。我想要像其他菜单一样打开和关闭它（它是浅灰色，并在选择部门模块）。

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

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

我的Javascript代码：

  script type =text / javascript> 
 
 / *语言选择器* / 
 
 $（function（）{
 $（＃lang-selector li）。hover b $ b $（'ul：first'，this）.css（'display'，'block'）; 
}，function（）{
 $（'ul：first'，this）。 css（'display'，'none'）; 
}）; 
}）; 
 
 $（document）.ready（function（）{
 
 / * Navigation * / 
 $（'。subnav-game'）。 
 $（'。subnav-game：eq（0）'）。show（）; 
 $（'。preorder-type'）hide（）; 
 
 b $ b $（'。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 ）无重复; 
 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：
$ b

 < div id =lang-selector> 
< ul> 
< li> 
< a href =＃>选择语言< / a> 
< ul> 
< li>< a href =？iw_lang = en>中文< / 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> 
  

$ b

谢谢！

解决方案

  $（function（）{
 $（＃lang-selector li：first）。 'ul：first'，this）.toggle（）; 
}）
}）; 
  

使用切换将需要您点击打开，然后重新点击关闭

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.

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).

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.

My Javascript Code:

<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:

#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:

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

Thanks!

解决方案

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

Using toggle will require you to click to open then reclick to close

这篇关于如何获得下拉菜单打开/关闭点击而不是悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！