1
我正在尝试学习JQuery并且在理解过程中遇到一些困难。我阅读了几篇文章,也许这是我对JavaScript的理解不够,这是阻碍,但我想学习。我的目标是将Accordion用户界面用于菜单系统;让主菜单项(#sidebar ul.accordion li .opener .selected)也可以作为链接,而不仅仅是子菜单的“开启者”(div.slide ul li a)。我在下面列出了HTML,CSS和JQuery脚本,并认为我的问题如下所示:JQuery Accordian:了解标题链接
问:我在JQuery的头部中遇到问题:或需要'点击(功能(){})'?
任何帮助(教育)将不胜感激。
我有以下HTML菜单结构...
<div id="sidebar">
<ul class="accordian">
<li>
<a href="./mainpagelink.php" class="opener">linkname</a>
<div class="slide">
<ul>
<li><a href="subpagelink.php">sublinkname</a></li>
...
</ul>
</div>
</li>
...
</ul>
...
</div>
我有以下的CSS ...
#sidebar {
width:210px;
float:left;
padding-top:18px;
}
#sidebar .accordion {
margin:0 0 12px;
padding:0;
list-style:none;
font-size:1.2em;/* 1.1 em */
}
#sidebar .accordion li {
border-bottom:1px solid #009;
padding:7px 0 7px 11px;
}
#sidebar .accordion a {outline-style:none;}
#sidebar .accordion a:hover {
color:#9fa714;
text-decoration:none;
}
#sidebar .accordion .ui-state-active {
display:block;
background:url(../images/arrow-rt.gif) 100% 5px no-repeat;
margin-right:11px;
color:#9fa714;
text-decoration:none;
}
#sidebar .slide {padding:1px 0 0 28px;}
#sidebar .slide ul {
margin:0;
padding:0;
list-style:none;
}
#sidebar .slide ul li {
border:0;
padding:4px 0 2px;
}
#sidebar .slide ul li.active a,
#sidebar .slide ul a:hover {
background:none;
color:#9fa714;
}
我有以下的jQuery脚本...
$(document).ready(function(){
$('ul.accordion').accordion({
active: ".selected",
autoHeight: false,
header: ".opener",
collapsible: true,
event: "click"
});