2010-02-19 24 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设置为展开手风琴的元素。你也希望它成为另一个页面的链接。你不能拥有两个。

你可以尝试什么是这样的:

+链接名称

分开的元素从您的链接打开手风琴。