添加查看更多按鈕

Question

我有由引導SQLserver和php創建的本節...

有什么辦法可以只顯示其中一部分，並提供“查看更多”按鈕選項以顯示整個結果？

大約有10個甲板，我想例如僅對sidplay 2個進行播放，當用戶單擊“查看更多”以顯示所有它們時。

這是我針對該結果的php代碼。

<div class="vertical-wrapper">
<?php 
for($i=0;$i<count($decks);$i++){
   $deck_name = $decks[$i]['name'];
   $deck_desc = $decks[$i]['description'];                                        
   $deck_img_link = $json['deckplans'][$i]['images'][0]['href'];
  echo "<img class='bd-imagelink-157 bd-own-margins bd-imagestyles' src='$deck_img_link'><p class='bd-textblock-779 bd-content-element'>$deck_name</p>";
   echo $deck_desc;
 }
?>
</div>

我試圖將bootstrap添加更多按鈕，但在所有內容加載之后顯示在本節的末尾，並且毫無意義

Answer 1

下面的示例演示如何一次顯示一個額外的隱藏項目。 您將需要使用jQuery JavaScript庫才能工作。

 $('#viewmore').on('click', function(){ $('.item:hidden').show(); }) 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item"> ITEM 1 </div> <div class="item hidden"> ITEM 2 </div> <div class="item hidden"> ITEM 3 </div> <div class="item hidden"> ITEM 4 </div> <button id="viewmore"> View More </button> </button>