我对JavaScript和Ajax/JQuery非常陌生,一直在努力尝试让一个脚本能够点击而非悬停来打开和关闭下拉菜单。
目标菜单可以在http://www.gamefriction.com/Coded/上找到,它是位于页眉下方右侧的黑色菜单。我希望它像稍后更低的另一个菜单(淡灰色,位于“选择分区”模块中)一样打开和关闭。
灰色的菜单是一个父菜单的一部分,而语言菜单则不是。
我还导入了JQuery,这可以在以上链接的源代码中找到。 我的JavaScript代码:
目标菜单可以在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ñol</a></li>
<li><a href="?iw_lang=fr">Français</a></li>
<li><a href="?iw_lang=it">Italiano</a></li>
</ul>
</li>
</ul>
</div>
谢谢!