Question

我已经查看了遍历stackoverflow的答案，我确信这只是我正在做的事情。

我有一堆div只显示标题，直到单击div，然后子跨度应该平滑滑下。再次单击div时，跨度应该隐藏。

切换功能正常，但滑动组件不平滑（只是立即显示在页面上）。

这是其中一个块的html ..

<div class="masterscourse">
    <h3>IPM 7790: Special Topics</h3>
    <span class="coursedescription">
    This course provides students an opportunity to explore topics not specifically addressed in a regular course offering, and that are of interest to practitioners and students
    </span>
</div>

jQuery ..

<script>
    $(document).ready(function() {
    $('.masterscourse span').hide();
    $(".masterscourse").click(function(){
        $('span', this).slideToggle('normal');
    });
    });
</script>

我觉得这应该是相对简单的，所以我确信我正在做的事情是愚蠢的。任何帮助将不胜感激。

Answer 1

问题在于内联元素与高度动画效果不佳。一个简单的解决方法是为span提供display:block样式：

http://jsfiddle.net/AmKVd/

span.coursedescription {
    display:block;
}

您还可以使用div代替span。

jQuery - 切换孩子们

1 个答案: