Jquery Slide Downループを使ってdivを表示

Question

テキストと画像を含むネストされたdivを持つ複数の複雑なdivがあります。ページが読み込まれると、divの4つが表示されます。下のボタンをクリックすると、詳細を表示するオプションが表示されます。ユーザがShow moreボタンを押すたびにJqueryを使用してスライドし、次の2つのdivを表示します。合計28個のdivがあるため、14行になります。すべてのdivが表示されると、ボタンが「表示が少なく」に変わり、残りの部分がスライドして表示されます（まだこの部分に移動していません）

JsFiddleは正しく機能していません。 （イムJavaScriptを最高の状態ではないが。以下は、私が例では、単純なdivを行った。コードとJsfiddleリンクです。

JsFiddle

Link To Js Fiddle

HTML

<div class="leaders"> 

    <div class="colum-left"> 

</div> 
<div class="colum-right"> 

</div> 
    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

</div> 
</div> 

<div class="leaders-hidden"> 

    <div class="colum-left"> 

    </div> 
<div class="colum-right"> 

</div> 

</div> 

<div class="leaders-hidden-2"> 

<div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

</div> 

</div> 

<div class="leaders-hidden-3"> 

<div class="colum-left"> 

</div> 
<div class="colum-right"> 

</div> 

</div> 


<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;" href="#">SEE MORE</a></span></center> 

あなたが行くここ10

JS

var count = 0; 

$(".leaders-hidden").addClass('hide'); 
$(".leaders-hidden-2").addClass('hide'); 
$(".leaders-hidden-3").addClass('hide'); 



$("#showmoreleaders").click(function() { 
count++; 
}); 

if (count == 1) { 
$(".leaders-hidden").slideDown("slow", function() { 
    // Animation complete. 
    }); 
} 


if (count == 2) { 
    $(".leaders-hidden-2").slideDown("slow", function() { 
    // Animation complete. 
    }); 
} 

if (count == 3) { 
    $(".leaders-hidden-3").slideDown("slow", function() { 
    // Animation complete. 
    }); 
} 

CSS

.read_btw { 
    border: 1px solid #017dc5; 
    margin-top: 10px; 
    padding: 15px; 
    display: inline-block; 
} 

.hide { 
display: none; 
} 

.colum-left { 
    float: left; 
    width: 48%; 
    border: 1px solid #d9dada; 
    margin: 0px; 
    border-radius: 6px; 
    margin-right: 7.5px; 
    margin-bottom: 20px; 
    height: 200px; 
    } 

.colum-right { 
    float: right; 
    width: 48%; 
    border: 1px solid #d9dada; 
    margin: 0px; 
    border-radius: 6px; 
    margin-right: 7.5px; 
    margin-bottom: 20px; 
    height: 200px; 
} 

JsFiddle

Link To Js Fiddle

Answer 1

。

あなたはあなたの外に関数があるので、それがうまくいかなかったのですが、それも表示された後で非表示にできるように更新されました。

また、aタグからhrefが削除されたため、ページがすべて上がっていたためです。あなたがに行くためのリンクを持っていない場合、あなたは

HTML

<div class="leaders"> 

    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 
    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 
</div> 

<div class="leaders-hidden"> 

    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 

</div> 

<div class="leaders-hidden-2"> 

    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 

</div> 

<div class="leaders-hidden-3"> 

    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 

</div> 


<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;">SEE MORE</a></span></center> 

CSS

.read_btw { 
    border: 1px solid #017dc5; 
    margin-top: 10px; 
    padding: 15px; 
    display: inline-block; 
} 

.colum-left { 
    float: left; 
    width: 48%; 
    border: 1px solid #d9dada; 
    margin: 0px; 
    border-radius: 6px; 
    margin-right: 7.5px; 
    margin-bottom: 20px; 
    height: 200px; 
} 

.colum-right { 
    float: right; 
    width: 48%; 
    border: 1px solid #d9dada; 
    margin: 0px; 
    border-radius: 6px; 
    margin-right: 7.5px; 
    margin-bottom: 20px; 
    height: 200px; 
} 

.hide{ 
    display: none; 
} 

#showmoreleaders{ 
    cursor: pointer; 
} 

JS

タグにhref属性を置くべきではありません

var count = 0; 

$("#showmoreleaders").click(function() { 

    count++; 

    if (count == 1) { 
     $(".leaders-hidden").slideDown("slow", function() { 
      // Animation complete. 
     }); 
    } 

    if (count == 2) { 
     $(".leaders-hidden-2").slideDown("slow", function() { 
      // Animation complete. 
     }); 
    } 

    if (count == 3) { 
     $(".leaders-hidden-3").slideDown("slow", function() { 
      // Animation complete. 
     }); 
     $('#showmoreleaders').html('SEE LESS'); 
    } 

    if (count == 4) { 
     $(".leaders-hidden-3").slideUp("slow", function() { 
      // Animation complete. 
     }); 
    } 


    if (count == 5) { 
     $(".leaders-hidden-2").slideUp("slow", function() { 
      // Animation complete. 
     }); 
    } 

    if (count == 6) { 
     $(".leaders-hidden").slideUp("slow", function() { 
      // Animation complete. 
     }); 
    } 

    if (count == 7) { 
     $('#showmoreleaders').html('SEE MORE'); 
     count = 0; 
    } 
}); 

$(".leaders-hidden").addClass('hide'); 
$(".leaders-hidden-2").addClass('hide'); 
$(".leaders-hidden-3").addClass('hide');