如何获得下拉菜单，点击开启/关闭，而不是悬停？ [英] 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（function（）{
 $（'ul：first'，this）.css（'display'，'block'）; 
}，function（）{
 $（'ul：first'，this）。 css（'display'，'none'）; 
}）; 
}）; 
 
 $（document）.ready（function（）{
 
 / *导航* / 
 $（'，subnav-game'）。 
 $（'。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 ）不重复; 
颜色：＃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; 
颜色：＃999; 
} 
 
＃lang-selector ul ul li a：hover 
 {
 background：＃c4262c; 
 color：#fff; 
} 
  

我的HTML：

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

谢谢！

解决方案

  $（function（）{
 $（＃lang-selector li：first）点击（function（）{
 $ '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屋！