如何再次关闭div时，它是由点击功能触发

Question

我有这个jquery代码加载更多的内容从隐藏的div我得到它打开，一切工作顺利，但我想它再次关闭，但我不知道如何做到这一点。我还想改变loadmore关闭时，它是开放的…

帮助html:

<a href="#" id="loadMore">Load More</a>  
$(function () {
    $("moreinfo").slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});
$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});

更新:

    $(function () {
        $("div").slice(0, 4).show();
        $("#loadMore").on('click', function (e) {
            e.preventDefault();
            $(".moreinfo:hidden").slice(0, 4).slideDown();
        });
        $(".loadLess").on('click', function (e) {
            e.preventDefault();
            $(".moreinfo:visible ").slice(0, 4).slideUp();
        });
    });

Answer 1

此函数获取隐藏和显示的前4个元素:使用slideDown函数阻止它们。如果您想再次隐藏它们，您需要在slideDown函数之前对这些元素进行引用。或者，如果这在你的html结构中是合适的，把最后4个可见的div元素隐藏起来。

那么，像

这样的函数

$("#loadLess").on('click', function (e) {
    e.preventDefault();
    $("div:visible").slice(-4).slideUp();
});

在这种情况下，您需要有一个元素来触发该函数运行，最可能的是在可见div

的末尾。

  <a id="loadLess">Show less</a>

话虽如此，像div:visible或div:hidden这样的选择器也会造成麻烦。你应该使用一些特定的类属性，比如。contentents:hidden之类的

编辑:这里有一个简单的链接，看看它是如何工作的

，这是jsfiddle

中使用的代码

<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
<div class="someclass">some content 1 </div>
.....
<span id="loadMore">Load More</span>
<span id="loadLess">Load Less</span>

js

$('div').slice(0, 4).show();
$("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
$("#loadLess").on('click', function (e) {
    e.preventDefault();
    $("div:visible").slice(-4).slideUp();
});

Answer 2

尝试使用toggle()

http://api.jquery.com/toggle/

下面是一个如何使用它的例子:

JSFiddle