1

我使用 Daniel Stocks jQuery-Collapse 和 cookie，效果很好。

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

嗨，有人知道我如何将其中一个标题设为链接吗？因此，当单击它时，它会链接到另一个包含菜单的页面，并且当加载此页面时，单击的菜单会展开并显示子项。

在下面的示例中，我需要将 fruits 链接到另一个页面并在此页面上展开：

 <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>

任何帮助，将不胜感激 ：-）

4

2 回答 2

0

您可以添加到a href="default2.html#id"一个 id 并将其设置为下一个ul id="id"

通过这种方式使用 javascript，您可以在加载时显示正确的列表。

看看这里

http://jsfiddle.net/toroncino/an9Z2/

于 2012-05-01T12:16:00.047 回答
0

我看到的另一个问题是插件将忽略其中包含链接的 h3。

因此您需要将其与自定义 show() 处理程序结合使用。

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 提到的方法，只需将要在其他页面中打开的项目设置为活动状态。

所以在这个例子中，如果 url 是#fruits，那么我们在加载时打开的项目将是 id="fruits" 的 h3

为此，您可以使用。

if(window.hash){
    $("#"+window.hash).addClass('active')
于 2012-05-01T15:26:21.900 回答