0

mvc razor and jquery我正在基于 DB Records 动态使用和构建 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% 成功地实现我想要的，所以我想我会在这里得到一些新的想法。

我如何通过保持 View more/Less 作为超链接在 JQUERY 中实现这一点？谢谢，

4

1 回答 1

2

您可以在 jQuery 中使用 ':eq()' 选择器。

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

这是小提琴的一个例子。

这是示例中的代码：

// 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 隐藏该容器。这是这种方法的一个小提琴。

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

附带说明，元素 id 必须是唯一的。所以你不应该使用id="test"所有的div。考虑改为将测试作为一个类。

于 2013-07-11T17:18:45.513 回答