Question

我们有一个asp.NET页面，它在无序列表中以编程方式将数据添加为新列表项。

我想使用一些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>

<% 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>

Answer 1

HTML元素的ID必须是唯一的，因此您的循环会产生无效的HTML。尝试为DIV指定一个类而不是ID。

.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;
    });

});

Answer 2

你可以用每种方法做到这一点......

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

Answer 3

将div更改为使用面板类而不是id。

 <div class="panel">

然后像这样切换幻灯片：

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

这将获得div，其中类面板存在于锚的父级的父级中。

同一页面上有多个Jquery滑动面板

3 个答案: