由点击功能触发时如何再次关闭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 这样的选择器会造成麻烦。您应该为此使用一些特定的类属性，例如 .contentitems:hidden 或其他东西

编辑： Here's a fiddle link 看看它的工作原理

这是 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