2010-02-19 68 views
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" 
}); 

回答

0

從外觀上看,您正在構建一個樹型視圖菜單。因此,我會說這就是你想要的...樹視圖...不是手風琴。

在您的示例中,您將.opener設置爲展開手風琴的元素。你也希望它成爲另一個頁面的鏈接。你不能擁有兩個。

你可以嘗試什麼是這樣的:

+鏈接名稱

分開的元素從您的鏈接打開手風琴。