Question

我有以下代码，在第3项之后，我想要隐藏额外的项目，直到用户点击“显示更多”。单击“显示更多”时，“显示更少”将替换“显示更多”，单击“显示更少”时将再次返回仅显示3个项目并显示“显示更多”。目前，它的添加显示更多的每个项目，而不是隐藏额外的项目。

这是我的代码和Fiddle

//SHOW ONLY 2 RESULT INITIALLY ANS HIDE the REST UNTIL USER CLICKS  SHOW MORE and when SHOW LESS is clicked display show more with the 3 items. 
$("div.item-b").has("div:nth-child(5)").append('<p class="showhide">Show More</p>');
$("div.item-b").click(function () {
    var $this = $(this), $cards = $(this).closest('.item-b');
    $cards.toggleClass('open');
    $this.text($cards.hasClass('open') ? 'Show less' : 'Show more')
});

Answer 1

我更新了你的小提琴 - 我为每个元素添加了一个计数器作为id

<div id="item_'+ID+'"></div>

http://jsfiddle.net/n7305445/52/

希望它有所帮助;）

Answer 2

查看我的JSFiddle。希望这可以提供帮助：

基本思路是在项目列表中添加“Show More”和“Show Less”div，然后隐藏“Show Less”div。这些也可以是链接或按钮，但我决定使用div。使用符合您需求的。

<强> HTML

<div class="item-b">
    <div>Stuff inside 1</div>
    <div>Stuff inside 2</div>
    <div>Stuff inside 3</div>
    <div>Stuff inside 4</div>
    <div>Stuff inside 5</div>
    <div class="show more">Show More</div>
    <div class="show less">Show Less</div>
</div>

接下来，您希望隐藏列表中第3个之后的所有div，不包括显示更多/更少的div，所以在CSS中你可以这样做：

<强> CSS

/* Hide the show more/less divs */
.show {
    display: none;
    color: blue;
}

.show:hover {
    cursor: pointer;
}

/* Hide 4th div and all the ones after it */
.item-b div:nth-child(n+4) {
    display: none;
}

然后在你的JS中，你需要应用两个点击处理程序（如果你愿意，可以将它重构为一个点击处理程序），一个用于.show.more div，另一个用于.show.less DIV。这将来回切换。

如果您需要进一步澄清，请与我们联系。

$(document).ready(function() {
    var threshold = 3;

    if ($("div.item-b").children().not(".show").length > threshold) {
        $(".show.more").css("display", "block");
    }


    $(".show.more").on("click", function() {
        $(this).parent().children().not(".show").css("display", "block");
        $(this).parent().find(".show.less").css("display", "block");
        $(this).hide();
    });

    $(".show.less").on("click", function() {
        $(this).parent().children(":nth-child(n+" + (threshold + 1) + ")").not(".show").hide();
        $(this).parent().find(".show.more").css("display", "block");
        $(this).hide();
    });

});

JQuery显示前3项并隐藏其余结果，显示更多单击时显示所有结果不起作用

2 个答案: