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> 

然后它工作。