Question

我需要为我的客户端播客存档页面制作一个列表，该页面打开后会显示指向他们点击的月份的不同播客的链接。我非常想要像BlogSpot那样在页面右侧的默认博客存档小部件：http://kimrome.blogspot.com/

我能够在这里制作类似的内容：http://thehummingbirdplace.com/test2.html但我不知道如何制作显示列表是否已扩展的箭头。所以它需要在点击时改变方向，并在再次点击关闭该部分时返回到上一个方向。

当我打开页面时，我的版本也会显示子元素，并且我不希望它们在单击其父级之前展开。

我在网上看看是否已经创建了jQuery来实现这一目标，或者我是如何做到这一点的，但是由于我不确定这整个事情的标题是什么，我得到了混合的结果。任何帮助将不胜感激!!

Answer 1

尝试jQuery-UI accordion

$(...).accordion();

，或者：http://jsfiddle.net/5SKLV/1/

$(...).myAccordion();

根据自己的喜好编写CSS。

Answer 2

如果你想自己这样做（自己写东西很有趣）：

我已将#tree的ID添加到根<ul>，并在<li>中包含了1级<span>的文字：

<ul id="tree">
    <li>
        <span>parent1</span>
        <ul>
            <li>child11</li>
            <li>child12</li>
        </ul>
    </li>
    <li>
        <span>parent2</span>
        <ul>
            <li>child21</li>
            <li>child22</li>
        </ul>
    </li>
</ul>

要应用向左和向右指向父元素的箭头，请创建两个带背景的CSS类（例如，您需要在其他地方查找背景图像或制作自己的图像）：

.opened > span {
    background: url('arrow_pointing_down.png') left top;
    color: #0a0; /* just to make it easy to know which class it has */
}
.closed > span {
  background: url('arrow_pointing_right.png') right top;
    color: #00a; /* just to make it easy to know which class it has */
}

在页面加载时隐藏所有子元素...

$('#tree > li').addClass('closed');
// hide the level 2 ul's
$('#tree > li ul').hide();

然后在你的点击处理程序中：

$("#tree > li > span").click(function (event) {
    event.preventDefault();
    // swap the opened and closed classes
    $(this).parent().toggleClass('opened closed');
     // toggle the level 2 ul instead of li
    $(this).parent().find("ul").toggle();
});

此处的演示演示：http://jsfiddle.net/cTLGN/

其他

此演示代码不使用对jQuery对象的缓存引用来使其更易于阅读。实际上不是做：

$(this).parent().toggleClass('opened closed'); $(this).parent().find("ul").toggle();

......应该做的事：

var parent = $(this).parent(); // search the DOM once for this' parent, and remember it parent.toggleClass('opened closed'); parent.find("ul").toggle();

..因为每次使用jQuery的$（）构造函数时，它都需要通过整个DOM进行搜索，如果重复执行，这可能会非常昂贵。

无法使用jQuery创建扩展列表

2 个答案: