javascript - 单击功能触发时如何再次关闭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();
});