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

谢谢

Answer 1

这是你的罪魁祸首

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

看起来有块显示的 div 与淡入混淆了。如果将其更改为跨度

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

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

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

然后就可以了。