1

希望有人能帮助我。

我正在尝试让“显示更多”链接扩展隐藏的 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>

有任何想法吗？

4

3 回答 3

1

HTML 无效，因为您的toggle-wrapDIV 是您的 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();
});
于 2012-07-11T05:03:11.540 回答
1
  1. 您的 HTML无效。不要使用<div>元素，而是使用附加列表。
  2. 使用 jQuerybind('click')来切换子列表。

在 jsFiddle 上查看演示

于 2012-07-11T05:05:58.227 回答
1

正如我在上面的评论中提到的，您的 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/

于 2012-07-11T05:14:43.637 回答