jQuery-折叠与标题中的链接 [英] jQuery-Collapse with link in header

问题描述

我将Daniel Stocks jQuery-Collapse与Cookie配合使用， 效果很好.

I using Daniel Stocks jQuery-Collapse with cookies, which works great.

https://github.com/danielstocks/jQuery-Collapse

有人知道我能做一个 标头的链接?所以当点击 它链接到另一个也包含菜单的页面， 加载此页面后， 菜单展开，显示子项.

Hi, does anyone know how I can make one of the headers a link? So when clicked it links to another page also containing the menu, and when this page is loaded, the clicked menu is expanded showing the sub items.

在下面的示例中，我需要链接水果 到另一个页面并在此扩展 页面:

In the example below, I need fruits to link to another page and to be expanded at this page:

 <div class="demo">             
                <h3><a href="default2.html">Fruits</a></h3>
                <ul>
                    <li>Apple</li>
                    <li>Pear</li>
                    <li>Orange</li>
                </ul>
                <h3>Vegetables</h3>
                <ul>
                    <li>Carrot</li>
                    <li>Tomato</li>
                    <li>Squash</li>
                </ul>
                <h3>Colors</h3>
                <ul>
                    <li>Green</li>
                    <li><a href="http://en.wikipedia.org/wiki/Yellow">Yellow</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Orange_(colour)">Orange</a></li>
                </ul>
            </div>

任何帮助将不胜感激:-)

Any help would be appreciated :-)

推荐答案

我看到的另一个问题是，该插件将忽略其中带有链接的h3.

Another problem i'm seeing is that the plugin will ignore the h3 with the link inside it.

所以您需要将其与自定义show()处理程序结合起来.

so you'll need to combine this with a custom show() handler.

HTML

<h3 id="fruits" rel="index2.html#fuits">Fruits</h3>
<ul>
  <li>Apple</li>
   <li>Pear</li>
   <li>Orange</li>
 </ul>
...

JS

$(".demo").collapse({
    head: "h3",
    group: "ul",
    show: function() {
       if($(this).prev().attr('rel')){
           // open a window with the rel value as the location.
           window.location=($(this).prev().attr('rel'));
       }
       $(this).show()
    },
    hide: function(){
       $(this).hide()
    }
});

然后使用@Andrea提到的方法，只需将要在另一页中打开的项目设置为活动状态即可.

Then using the method mentioned by @Andrea simply set the item you want opened in the other page to be active.

因此在此示例中，如果url是#fruits，那么我们将在加载时打开的项目将是带有id ="fruits"的h3

so in this example if the url was #fruits then the item we'd open on load would be the h3 with id="fruits"

为此，您可以使用.

if(window.hash){
    $("#"+window.hash).addClass('active')

这篇关于jQuery-折叠与标题中的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！