Question

希望有人可以帮助我。

我正在尝试使用“显示更多”链接展开隐藏的div并让“显示更多”消失，但我需要其中的列表项也会消失。这需要应用于同一页面上的多个列表，我需要能够逐项自定义“显示更多”文本。

看起来像这样：

<ul>
<li>Item</li>
<li>Item</li>
<li><a class="toggle">Show More...</a></li>
<div class="toggle-wrap">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>
</ul>

当您点击“显示更多”时，它看起来像这样：

<ul>
<li>Item</li>
<li>Item</li>
<li style="display: none;"><a class="toggle">Show More...</a></li>
<div class="toggle-wrap">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>
</ul>

有什么想法吗？

Answer 1

HTML无效，因为您的toggle-wrap DIV是您的UL的直接子女。要纠正这个问题，您可以为所有想要在所有人点击“显示更多”时显示的LI提供课程。例如：

<ul>
    <li>Item</li>
    <li>Item</li>
    <li><a class="toggle">Show More...</a></li>
    <li class="extra">Item</li> <!-- li's with class extra wont show up by default -->
    <li class="extra">Item</li>
    <li class="extra">Item</li>
</div>
</ul>

一旦您的HTML处于上述结构中，以下内容应适用于切换：

$('li a.toggle').click(function() {
    $(this).parent('li').hide();
    $(this).parent('li').siblings('extra').show();
});

Answer 2

您的HTML 无效。请使用其他列表。

<div>

使用jQuery bind('click')来切换子列表。

查看demo on jsFiddle

Answer 3

正如我在上面的评论中提到的那样，你的html是无效的，因为除了li元素之外你没有任何东西可以作为ul的直接后代。

如果这里的想法是隐藏长列表的结尾，直到用户点击“显示更多...”，那么你可以为你的html做这样的事情（基本上和你减去div一样）：

<ul>
<li>Item</li>
<li>Item</li>
<li><a class="toggle">Show More...</a></li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

然后在你的文档就绪处理程序中：

$('li a.toggle').each(function(){
    $(this).parent().nextAll().hide();
}).click(function(){
    $(this).parent().hide()
           .nextAll().show();
});

首先找到li中类“toggle”的所有链接，并隐藏所有以下相关的li元素。

点击处理程序获取所点击链接的父li并隐藏它，然后获取以下兄弟lis并显示它们。

这将自动适用于同一页面上的多个列表，如本演示中所示：http://jsfiddle.net/v2pNS/

jQuery显示更多

3 个答案: