JQuery Accordion：了解标题链接答案

【问题标题】：JQuery Accordian: Understanding header linksJQuery Accordion：了解标题链接
【发布时间】：2010-02-19 22:33:03
【问题描述】：

我正在尝试学习 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"
});

【问题讨论】：

标签： jquery jquery-ui-accordion document-ready css

【解决方案1】：

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

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

你可以尝试的是这样的：

+链接名称

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

【讨论】：