Показать больше разделов при нажатии кнопки «Якорь»?

Question

Я даже не уверен, что это будет вызвано, поэтому я не знаю, что искать, но то, что я пытаюсь сделать, это фиксированная кнопка, которая будет загружать больше div, когда будет нажата.

У меня есть 15 divs с классом «box», и я хочу отображать только 3 divs с классом «box». Как отобразить еще 3 divs, пока не отобразятся все 15 div?

<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 

<a href="#" title="">Load 3 More boxes</a> 

Answer 1

Вы, вероятно, следует добавить id или ее class на ваш якорь, чтобы отличить его от других якорей на той же странице. В конце концов, мы не хотим, чтобы все из них добавляя новые элементы: div

// Handle the click event of our anchor 
$("a.addMore").on("click", function(e){ 
    // Show the next three hidden .box elements immediately 
    $(".box:hidden:lt(3)").show(0, function(){ 
    // If there are no more hidden elements, remove our link 
    !$(".box:hidden").length && $(e.target).remove(); 
    }); 
// Trigger a click to load in our first three 
}).trigger("click"); 

Демо: http://jsbin.com/amituh/5/edit

Answer 2

Смотрите эту скрипку (обновлено, чтобы удалить якорь): http://jsfiddle.net/MaqYL/5/

Первоначально:

$(".box:gt(2)").hide(); 

При щелчке якоря:

$("a").click(function(){ 
    var hiddens = $(".box:hidden"); 
    hiddens.slice(0,3).show(); 
    if(hiddens.length <= 3) 
    { 
     $(this).remove(); 
    }  
}); 

Чтобы предотвратить использование других якорей, вы должны дать id вашему якорю.

Answer 3

<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div class="box">text text text text</div> 
<div id="garage" style="display:none"> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
    <div class="box">text text text text</div> 
</div> 

<a href="javascript:next3();" title="">Load 3 More boxes</a> 

function next3() { 
    var box = document.getElementById("garage"); 
    if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box); 
    if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box); 
    if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box); 
}