自動隱藏可加載的「加載更多」按鈕

我正在使用bootstrap tabbable在相冊頁面上工作。在此頁面中，每個選項卡都包含多行圖像，第一行顯示爲默認，而其他行隱藏。當按下「加載更多」按鈕時，會顯示另一行。請檢查此Bootply以便於理解。自動隱藏可加載的「加載更多」按鈕

我的問題是，我不知道如何在顯示所有內容時隱藏我的「加載更多」按鈕。這個問題對我來說有點複雜，因爲我想在每個標籤切換事件之後重置我的標籤頁。

我的代碼：

HTML：

<div class="tabbable"> 
    <ul class="nav nav-tabs"> 
     <li class="active" id="tab"><a href="#tab1" data-toggle="tab">tab1</a></li> 
     <li id="tab"><a href="#tab2" data-toggle="tab">tab2</a></li> 
     <li id="tab"><a href="#tab3" data-toggle="tab">tab3</a></li> 
    </ul> 
</div> 
<div class="con-box"> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="tab1"> 
      <div>Row1-1</div> 
      <div class="more" id="hidden1">Row1-2</div> 
      <div class="more" id="hidden2">Row1-3</div> 
     </div> 
     <div class="tab-pane" id="tab2"> 
      <div>Row2-1</div> 
      <div class="more" id="hidden1">Row2-2</div> 
      <div class="more" id="hidden2">Row2-3</div> 
     </div> 

     <div class="tab-pane" id="tab3"> 
      <div>Row3-1</div> 
      <div class="more" id="hidden1">Row3-2</div> 
      <div class="more" id="hidden2">Row3-3</div> 
     </div> 
    </div> 

    <div class="loading"><a>Load more...</a></div> 
</div>

的JavaScript：

var hidden = 1; 
$("div.more").hide(); 

$(".loading").click(function(){ 
    $("div#hidden"+hidden).show(); 
    hidden++; 
}); 

$("li#tab").click(function(){ 
    $("div.more").hide(); 
    hidden=1; 
});

來源

2014-06-20 tingfungc

OT：'id'應該是唯一的！ – BeNdErR

像@BeNdErR提到的那樣，使用唯一的ID來避免以後的問題。這不涉及你提到的問題。 – Fr0zenFyr

@BeNdErR感謝您的回覆。我應該嘗試在選項卡中定義唯一的前綴，並在選項卡由用戶選擇時獲取此前綴？如何實現這一目標？ – tingfungc

我已經改變了做法一點。

每次單擊load more按鈕時，代碼將在當前選項卡隱藏的div之間查找，並顯示第一個。
如果隱藏層的長度（在當前標籤頁）是<= 1，那麼你必須隱藏.loading按鈕每次更改選項卡時
，你必須拿出.loading按鈕

請注意，我分配一個唯一id每個div.more，但它不是用來

工作實例你可以擺脫它：http://www.bootply.com/P5LGMtSuIW

HTML

<div class="tabbable"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li> 
     <li class="tab"><a href="#tab2" data-toggle="tab">tab2</a></li> 
     <li class="tab"><a href="#tab3" data-toggle="tab">tab3</a></li> 
    </ul> 
</div> 
<div class="con-box"> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="tab1"> 
      <div>Row1-1</div> 
      <div class="more" id="t1-1">Row1-2</div> 
      <div class="more" id="t1-2">Row1-3</div> 
     </div> 
     <div class="tab-pane" id="tab2"> 
      <div>Row2-1</div> 
      <div class="more" id="t2-1">Row2-2</div> 
      <div class="more" id="t2-2">Row2-3</div> 
     </div> 
     <div class="tab-pane" id="tab3"> 
      <div>Row3-1</div> 
      <div class="more" id="t3-1">Row3-2</div> 
      <div class="more" id="t3-2">Row3-3</div> 
     </div> 
    </div> 
    <div class="loading"><a>Load more...</a> 
    </div> 
</div>

$("div.more").hide(); 

$(".loading").click(function() { 
    //--- get all divs 
    var divs = $("div.tab-pane.active div.more:hidden"); 
    if (divs.length <= 1) $(".loading").hide(); 

    //--- show the first hidden 
    $(divs).eq(0).show(); 
}); 

$("li.tab").click(function() { 
    $(".loading").show(); 
    $("div.more").hide(); 
});

CSS

div.more{ 
    display:none; 
}

希望它可以幫助

來源

2014-06-20 07:24:20 BeNdErR

我已經更新了代碼..沒有注意到你還在'li''id' – BeNdErR

自動隱藏可加載的「加載更多」按鈕

回答

相關問題