同一页面上的多个jQuery的滑动面板
题
我们有一个asp.NET页,其在programmaticaly无序列表添加数据作为新的列表项..
我想使用一些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>
解决方案
更改div来使用类面板代替ID的
<div class="panel">
然后切换这样的幻灯片:
$('.panel', $(this).parent().parent()).slideToggle("slow");
这会得到与存在于锚的父的父类面板在div。
其他提示
您可以做到这一点的每个方法...
$(document).ready(function(){
$(".btn-slide").each(
function(){ $(this).click(function(){
$(this).slideToggle("slow");
$(this).toggleClass("active"); return false;
});
);
});
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;
});
});
不隶属于 StackOverflow