JQuery Accordian：了解标题链接

Question

我正在尝试学习 JQuery，但在理解这个过程时遇到一些困难。我读了几篇文章，也许是我对 javascript 的理解很薄弱，但我想学习。我的目标是使用 Accordion UI 作为菜单系统；让主菜单项 (#sidebar ul.accordion li a .opener .selected ) 也可以用作链接，而不仅仅是作为子菜单 ( div.slide ul li a ) 的“开场白”。我在下面列出了 HTML、CSS 和 JQuery 脚本，并认为我的问题如下：

问：我的问题是在 JQuery 'header: "opener"' 或 'event: "click"' 或需要“click(function(){ })”吗？
任何帮助（教育）将不胜感激。

我有以下 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"
});

Answer 1

从表面上看，您正在构建一个树视图类型的菜单。因此，我想说这就是你想要的......树视图......而不是手风琴。

在您的示例中，您将 .opener 设置为展开手风琴的元素。您还希望它成为另一个页面的链接。你不能两者兼得。

您可以尝试如下所示：

+linkname

将打开手风琴的元素与链接分开。