jQuery - >切换功能

我有一个事件列表。我使用foreach来检索数据。我的名单看起来像：jQuery - >切换功能

<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列表出现小信息被点击，我想第一div.more，信息与淡入淡出或滑动切换。我在做什么错在我下面的代码：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.club-list-show-small-info').click(function(){ 
     $(this).next('div').slideToggle('.hide'); 
    }); 
}); 
</script>

来源

2014-01-20 Donny van V

click事件绑定到span元素时，div不是它的下一个兄弟元素，该div是span父h2元素的下一个兄弟。所以

$(document).ready(function() { 
    $('.club-list-show-small-info').click(function() { 
     $(this).parent().next('div').slideToggle(); 
    }); 
});

演示：Fiddle

来源

2014-01-20 02:32:07

感谢阿伦，完美的作品！我学到了一些东西:) –

它应该是：

$('.club-list-show-small-info').click(function(){ 
    $(this).parent().next().slideToggle(); 
});

既然你要显示和隐藏的信息是.club-list-small-info的next()兄弟这是你的.club-list-show-small-info跨度

的 parent()

Demo

如果你想有fade效果，你可以使用fadeToggle()：

$('.club-list-show-small-info').click(function(){ 
    $(this).parent().next().fadeToggle(); 
});

Demo

来源

2014-01-20 02:38:26 Felix

jQuery - >切换功能

回答

相关问题