如何通过点击功能再次关闭div

Question

我有这个从隐藏div加载更多内容的jquery代码我打开它，一切工作顺利，但我希望它再次关闭，但我不知道如何去做。 我也想改变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：隐藏什么

编辑： 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