Question

我使用Daniel Stocks jQuery-Collapse with cookies，这很棒。

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

嗨，有谁知道我怎么做一个标题链接？所以当点击时它链接到另一个包含菜单的页面，当加载此页面时，单击菜单展开显示子项目。

在下面的例子中，我需要水果来链接到另一页并在此扩展页面：

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

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

Answer 1

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

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

看看这里

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

Answer 2

我看到的另一个问题是插件会忽略带有链接的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提到的方法，只需将要在另一页中打开的项目设置为活动状态。

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

要执行此操作，您可以使用。

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

jQuery-Collapse与标题中的链接

2 个答案: