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