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 - >切換功能

回答

相關問題