Question

使用mvc razor and jquery并根据数据库记录动态构建UI。

在页面的部分中，如下所述，在单独的<div>中有很多常见信息

<div id="Test"> </div>
<div id="Test"> </div>
<div id="Test"> </div>
<div id="Test"> </div>
..
..
<div id="Test"> </div>

并且内容是动态的。所以我试图为用户实现切换设计

一次仅显示2个或3个底部<div>并隐藏另一个查看更多/查看更少。

如果用户显示更多视图，我会显示所有内容，如果他们点击查看更少，我会显示2-3 <div>

我尝试通过获取<div>的长度并制作display:none;来实现，但我并不是100％成功，所以我想在这里得到一些新的想法。

如何通过将查看更多/更少作为超链接来实现在JQUERY中？谢谢，

Answer 1

您可以使用':eq()' selector in jQuery。

:eq()允许您根据匹配集中的索引选择项目。因此:eq(0)是第一个元素，:eq(3)是第4个元素。

This is an example on fiddle.

以下是示例中的代码：

// If the div isn't the 1st, 2nd, or 3rd in the set of matched divs, hide it
$('div:not(:eq(0), :eq(1), :eq(2))').hide();

$(function () {
    $('#view-more-less').click(function () {
        $('div:not(:eq(0), :eq(1), :eq(2))').toggle();
    })
});

另一种方法是将除前3个之外的所有div包装在另一个容器中，并使用javascript隐藏该容器。 Here's a fiddle for that approach.

$('#view-more-less').click( function() {
    $('div.more-container').toggle();
});

在旁注中，元素id必须是唯一的。所以你不应该对所有div使用id="test"。考虑让测试成为一个类。

显示/隐藏带链接的其他div。

1 个答案: