0

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

我可以在这里制作类似的东西：http: //thehummingbirdplace.com/test2.html但我不确定如何制作显示列表是否已扩展的箭头。因此，它需要在单击时改变方向，并在再次单击以关闭该部分时返回到先前的方向。

当我打开页面时，我的版本还显示了子元素，我不希望它们展开，直到它们的父元素被点击。

我已经在网上查看是否已经创建了 jQuery 来执行此操作，或者我如何能够做到这一点，但是由于我不确定这整件事的正确标题是什么，所以我得到的结果好坏参半。任何帮助，将不胜感激！！

4

2 回答 2

2

试试 jQuery-UI手风琴

$(...).accordion();

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

$(...).myAccordion();

只需根据您的喜好编写 CSS。

于 2013-11-05T07:01:35.677 回答
1

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

我已将 ID 添加#tree到 root <ul>，并将 level 1<li>的文本包装在<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，如果你重复这样做会非常昂贵。

于 2013-11-05T07:05:09.317 回答