我有一个包含事件的列表。我对数组使用 foreach 来检索数据。我的列表如下所示:
<article class="club-list-club">
<h2 class="club-list-title">
<a href="'.url('clubs/'.$club->getSlug()).'">'.$club->getClubnaam().'</a>
</h2>
<h2 class="club-list-location">
'.$club->getWoonplaats().'
</h2>
<h2 class="club-list-open-info">
Openingstijden
</h2>
<h2 class="club-list-big-info">
link2page
</h2>
<h2 class="club-list-small-info">
<span class="club-list-show-small-info">Show</span>
</h2>
<div class="more-info hide">
Hier wat informatie over de club zelf die kort word weergeven. je vind hier de openingstijden en alle
andere belangrijke info. Hier wat informatie over de club zelf die kort word weergeven. je vind hier de
openingstijden en alle andere belangrijke info.
</div>
</article>';
当单击 SPAN .club-list-show-small-info 时,我希望第一个 div.more-info 可以淡入淡出或滑动切换。我在下面的代码中做错了什么:
<script type="text/javascript">
$(document).ready(function(){
$('.club-list-show-small-info').click(function(){
$(this).next('div').slideToggle('.hide');
});
});
</script>
最佳答案
点击事件绑定(bind)到span
元素,div
不是它的下一个同级元素,div
是它的下一个同级元素span
的父 h2
元素。所以
$(document).ready(function () {
$('.club-list-show-small-info').click(function () {
$(this).parent().next('div').slideToggle();
});
});
演示:Fiddle
关于javascript - jQuery -> 切换功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21225357/