Question

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

问：我的问题是在JQuery的标题中：“开启者”或'事件：'点击“'或需要'点击（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设置为展开手风琴的元素。您还希望它成为另一个页面的链接。你不能兼得。

你可以尝试的是这样的：

+链接名称

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

JQuery Accordion：了解标题链接

1 个答案: