我从 internet 窃取了脚本允许 jquery 滑动菜单的教程。
菜单工作得很好，除了默认情况下第一个父链接是展开的。我希望默认关闭所有父菜单项。
这是 JavaScript:
<script type="text/javascript">
$(function(){
// hide all links except for the first
$('ul.child:not(:first)').hide();
$("a.slide:first").css("background-color","");
// for image
// $("a.slide:first").css("background-image","url('path')");
$('ul.parent a.slide').click(function(){
$('ul.parent a.slide').css("background-color","");
$('ul.parent a.slide').hover(function(){
$(this).css("background-color","");
});
$('ul.parent a.slide').mouseout(function(){
$(this).css("background-color","");
});
$(this).mouseout(function(){
$(this).css("background-color","");
});
$(this).css("background-color","");
// slide all up
$('ul.child').slideUp('slow');
// show the links of current heading
$(this).next().find('a').show();
// slide down current heading
$(this).next().slideDown('fast');
// prevent default action
return false;
});
});
</script>
完整的页面代码为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
// hide all links except for the first
$('ul.child:not(:first)').hide();
$("a.slide:first").css("background-color","");
// for image
// $("a.slide:first").css("background-image","url('path')");
$('ul.parent a.slide').click(function(){
$('ul.parent a.slide').css("background-color","");
$('ul.parent a.slide').hover(function(){
$(this).css("background-color","");
});
$('ul.parent a.slide').mouseout(function(){
$(this).css("background-color","");
});
$(this).mouseout(function(){
$(this).css("background-color","");
});
$(this).css("background-color","");
// slide all up
$('ul.child').slideUp('slow');
// show the links of current heading
$(this).next().find('a').show();
// slide down current heading
$(this).next().slideDown('fast');
// prevent default action
return false;
});
});
</script>
<style type="text/css">
a
{
//outline:none;
}
ul
{
list-style:none;
}
ul.parent
{
margin:0px;
}
ul.parent a
{
display:block;
//width:200px;
//border-bottom:1px solid #336699;
//background:#3399FF;
//color:#FFFFFF;
//font-weight:bold;
//text-decoration:none;
//padding:0px;
//margin: 0;
}
ul.parent a:hover
{
//color:#000000;
//background:#66CC66
}
ul.child a
{
//background:#333333;
//color:#FFFFFF;
//border-bottom:1px solid #f6f6f6;
//font-weight:normal;
//margin-left:-40px;
//padding:7px;
//width:200px;
//display:block;
//line-height:10px;
}
ul.child a:hover
{
//color:#3333333;
//background:#CCCCCC
}
</style>
</head>
<body>
<ul class="parent">
<li>
<a href="#" class="slide"><img src="images/organisationbutton.png" border=0></a>
<ul class="child">
<li><a href="#"><img src="images/personbutton2.png" border=0></a></li>
<li><a href="#"><img src="images/jobsbutton2.png" border=0></a></li>
</ul>
</li>
</ul>
<ul class="parent">
<li>
<a href="#" class="slide"><img src="images/risksbutton.png" border=0></a>
<ul class="child">
<a href="#" class="slide"><img src="images/risksbutton3.png" border=0></a>
<a href="#" class="slide"><img src="images/linkriskstojobsbutton.png" border=0></a>
<a href="#" class="slide"><img src="images/linkhealthriskstopeople.png" border=0></a>
</ul>
</li>
</ul>
<ul class="parent">
<li>
<a href="#" class="slide"><img src="images/policiesbutton.png" border=0></a>
<ul class="child">
<a href="#" class="slide"><img src="images/trainingrequiredbylaw.png" border=0></a>
</ul>
</li>
</ul>
<ul class="parent">
<li>
<a href="#" class="slide"><img src="images/trainingbutton.png" border=0></a>
<ul class="child">
<a href="#" class="slide"><img src="images/trainingcoursesbutton.png" border=0></a>
<a href="#" class="slide"><img src="images/medicalinterventionsbutton.png" border=0></a>
<a href="#" class="slide"><img src="images/trainingdonebutton.png" border=0></a>
</ul>
</li>
</ul>
<ul class="parent">
<li>
<a href="#" class="slide"><img src="images/assessmentbutton.png" border=0></a>
<ul class="child">
<a href="#" class="slide"><img src="images/individualtrainingbutton.png" border=0></a>
<a href="#" class="slide"><img src="images/departmentcompliancebutton.png" border=0></a>
</ul>
</li>
</ul>
</body>
</html>
任何帮助将一如既往，我相信有一个简单的解决方案，但我的 JavaScript 技能还处于起步阶段。
再次感谢，
最佳答案
只需更改此:
// hide all links except for the first
$('ul.child:not(:first)').hide();
这样:
// hide all links
$('ul.child').hide();
关于javascript - jquery滑动菜单，默认折叠所有菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12438884/