自动隐藏可加载的“加载更多”按钮

我正在使用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

自动隐藏可加载的“加载更多”按钮

回答

相关问题