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

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

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