如何：JQuery Accordion：链接到内部切换菜单答案

【问题标题】：HOWTO: JQuery Accordion: link to internal toggle menu如何：JQuery Accordion：链接到内部切换菜单
【发布时间】：2010-06-29 22:34:42
【问题描述】：

在我的网站标题中，我有 3 个随机预览。

<ul id="dm_list">
<li><div id="sinistra"><script>boxsinistro_ita();</script></div></li>
<li><div id="centro"><script>boxcentrale_ita();</script></div></li>
<li><div id="destra"><script>boxdestro_ita();</script></div></li>
</ul>

单击其中一个预览，您将进入带有“JQuery Accordion”菜单的网页。例如：

菜单1
菜单2
菜单3

如何打开在标题中单击的“切换”部分？

【问题讨论】：

标签： jquery accordion

【解决方案1】：

对 Accordion 使用 activate 方法。假设它们与标题中的列表项的顺序相同，则可以使用索引版本。

$('#dm_list > li a').click( function() {
    var index = $('#dm_list > li a').index(this);
    $('#menu').accordion('activate',index);
    return false;
});

编辑：

事实证明，如果您想指定要在不同页面上打开的部分，这比我想象的要容易。手风琴已经用navigation 选项处理了这个问题。只需确保 url 中的哈希与您想要的手风琴部分的 id 匹配。请注意，此代码与手风琴一起出现在页面上。

 <script type="text/javascript">
     $(function() {
          $('#menu').accordion( { navigation: true } );
     });
 </script>

【讨论】：

如何在此处插入激活方法：document.write(''+titolo[ry]+'
'+descrizione[ry]+' a>')
@Marco -- 虽然我使用的手风琴名称是虚构的，但如果手风琴在同一页面上，上面的代码放在脚本容器中就足够了（尽管我可能会更改它关闭链接并返回 false 以防止链接操作 - 我会更新这个）。如果手风琴在不同的页面上，那么您必须求助于在文档加载时从页面 url 中找出需要哪个部分并将内部代码放在该页面上。这种情况可能会使用带有选择器而不是索引号的版本。
是的，accordin 在另一页，我想要一些锚点，可以吗？
@Marco - 使用对应于手风琴 id 的散列将起作用。我会用一个例子来更新这个案例。
@Marco -- 你只需要使用手风琴上的导航选项来完成这项工作。我已经更新了。

【解决方案2】：

带有菜单的 HTML：

<ul id="dm_list">
<li><div id="sinistra"><script>boxsinistro_ita();</script></div></li>
<li><div id="centro"><script>boxcentrale_ita();</script></div></li>
<li><div id="destra"><script>boxdestro_ita();</script></div></li>
</ul>

boxsinistro_ita() = box_centrale_ita() = boxdestro_ita() =

document.write('<a class="swith" rel="'+fotogrande[ry]+'" href='+'"'+link[ry]+'"'+'><img src="'+fotopiccola[ry]+'" border=0><b>'+titolo[ry]+'</b><br>'+descrizione[ry]+'</a>');

带有 Accordion 类的 HTML：

<div class="title">TITLE1</div>
<div class="title">TITLE2</div>
<div class="content">CONTENT1</div>
<div class="content">CONTENT2</div>

【讨论】：