fadeToggle子元素

Question

fadeToggle無法按預期工作。

這裏是一個示例小提琴：http://jsfiddle.net/JNu2q//

什麼，我需要做的是有更多的元素淡出，但所有的子元素的

<div id="happenings"> 
    <h3>Clicky<span class="ui-icon ui-icon-circle-triangle-e"></span></h3> 
    <span class="ui-helper-hidden"><div class="more"> yadada</div></span> 
    <h3>Clicky<span class="ui-icon ui-icon-circle-triangle-e"></span></h3> 
     <span class="ui-helper-hidden">THINGS</span> 
      <h3>Clicky<span class="ui-icon ui-icon-circle-triangle-e"></span></h3> 
     <span class="ui-helper-hidden"">THINGS</span> 
</div> 
<script type="text/javascript"> 
$('#happenings>h3').click(function() { 

    $(this).next('span').fadeToggle() 
    $('span', this).toggleClass('ui-icon-circle-triangle-s'); 
}); 
</script> 

爲小提琴表示當單擊第一個項目擴大但不褪色和合同。

這是我試圖做的事情的高度縮小版本。我通過ajax將配置文件加載到每個配置文件中。在跨度內是一些其他元素。所以其中的擴張和收縮。總之，我需要的跨度和它的子格在褪色。

感謝

Answer 1

這是您的罪魁禍首

<div class="more"> yadada</div> 

它看起來像有塊顯示在div與淡入搞亂如果您將其更改爲一個跨度

<span class="more"> yadada</span> 

或設置它的顯示是內聯（或內聯塊）

<div class="more" style="display:inline;"> yadada</div> 

然後它工作。