多jQuery的滑動

同一頁

面板上我們有一個asp.NET頁面被programmaticaly將數據作爲一個無序列表新的列表項目..多jQuery的滑動

我想使用一些jQuery來顯示額外細節的滑動面板每個列表項目，但我只用代碼顯示該系列中的第一個（我猜是因爲他們被稱爲是相同的）..我如何添加一些條件，以選擇正確的呢？

下面是代碼：

 
    
$(document).ready(function(){ 

    $(".btn-slide").click(function(){ 
     $(this).slideToggle("slow"); 
     $(this).toggleClass("active"); return false; 
    }); 

}); 
    

    
#panel { 
    background: #754c24; 
    height: 200px; 
    display: none; 
} 
.slide { 
    margin: 0; 
    padding: 0; 
    border-top: solid 4px #422410; 
    background: #000 no-repeat center top; 
} 
.btn-slide { 
    background: url(images/white-arrow.gif) no-repeat right -50px; 
    text-align: center; 
    width: 144px; 
    height: 31px; 
    padding: 10px 10px 0 0; 
    margin: 0 auto; 
    display: block; 
    font: bold 120%/100% Arial, Helvetica, sans-serif; 
    color: #fff; 
    text-decoration: none; 
} 
.active { 
    background-position: right 12px; 
}

 <% foreach(var registration in ViewModel) { %> 
      <li> 
      Event: <%= registration.Event.Name %> 
      Date: <%= registration.Event.Date.ToLongDateString() %> 
      <div id="panel"> 
       <% if (registration.HasResult) { %> 
       Your result for this event: 
       Place: <%= registration.Result.Place %> 
       Time: <%= registration.Result.Time %> 
       Average Pace: <%= registration.Result.AveragePace %> 
       <% } else { %> 
       No results have been posted for this event. 

       <% } %> 
       </div>     
       <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 
      </li>    
    <% } %> 
</ul>

來源

2009-11-24 Kevin

更改DIV使用類的面板而不是id。

<div class="panel">

然後切換這樣的幻燈片：

$('.panel', $(this).parent().parent()).slideToggle("slow");

這將讓與存在於錨的父的父類面板股利。

來源

2009-11-24 19:47:44 BStruthers

沒有工作後，沒有做任何事情..再次面板不添加此 – Kevin 2009-11-24 19:57:10

哎呦後滑，我錯了 - 這工作了魅力（我沒有把它放在右）感謝！ – Kevin 2009-11-24 19:58:10

我不知道我是否應該修改已回答的問題..但是我做了一個改變面板類100％的高度，它非常適合，但是，打開它的第一下降到頁面的高度（這是更長的時間）然後回來，並適合幻燈片的內容....有沒有辦法阻止？ – Kevin 2009-11-25 14:54:43

HTML元素的ID必須是唯一的，這樣你的循環產生無效的HTML。嘗試分配一個類而不是ID到您的DIV。

.panel { 
    background: #754c24; 
    height: 200px; 
    display: none; 
} 

<% foreach(var registration in ViewModel) { %> 

    <li> 
    Event: <%= registration.Event.Name %> 
    Date: <%= registration.Event.Date.ToLongDateString() %> 
    <div class="panel"> 
     <% if (registration.HasResult) { %> 
     Your result for this event: 
     Place: <%= registration.Result.Place %> 
     Time: <%= registration.Result.Time %> 
     Average Pace: <%= registration.Result.AveragePace %> 
     <% } else { %> 
     No results have been posted for this event. 
     <% } %> 
     </div> 
     <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 
    </li> 
<% } %>

更新：還有你的JavaScript看起來不正確：

$(document).ready(function(){ 

    $(".btn-slide").click(function(){ 
     $(this).closest('li').find('.panel').slideToggle("slow"); 
     $(this).toggleClass("active"); 
     return false; 
    }); 

});

來源

2009-11-24 19:35:42 tvanfosson

這樣感動，這是在div外出於某種原因裏面的信息和崩潰只有滑動連桿，而不是實際的面板 – Kevin 2009-11-24 19:38:25

您需要更改CSS，太上工作，以便CSS選擇器面板使用這個類。此外，我認爲你的JavaScript需要slideToggle以前的DIV，而不是按鈕。 – tvanfosson 2009-11-24 19:41:47

...請注意，您可能還需要在更新CSS時清除緩存。 – tvanfosson 2009-11-24 19:45:01

你可以做到這一點的每個方法...

$(document).ready(function(){ 
    $(".btn-slide").each(
     function(){ $(this).click(function(){ 
     $(this).slideToggle("slow"); 
     $(this).toggleClass("active"); return false; 
     }); 
    ); 
});

來源

2009-11-24 19:38:05 Ben

不是爲我工作，點擊該鏈接並補充說 – Kevin 2009-11-24 19:45:51

多jQuery的滑動

回答

相關問題