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将配置文件加载到每个。跨度内是一些其他元素。所以扩大和收缩。简而言之，我需要跨度及其子div才能淡入。

由于

Answer 1

这是你的罪魁祸首

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

看起来像有块显示的div正在弄乱淡入。如果你把它改成跨度

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

或将其显示设置为内联（或内嵌块）

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

然后它有效。