用于Div向下滑动效果的Javascript代码

Javascript code for Div slide down effect?

本文关键字:Javascript 代码 Div 用于      更新时间:2023-09-26

我已经尝试创建div"向下滑动"效果很长一段时间了,我发现了这个JS Fiddle,它给出了一个我想要的例子;http://jsfiddle.net/L5P2Y/368/。它使用这个代码:

$(document).ready(function() {
    var $cont;    
    function tgl_conts(){
        $('.content').stop().animate({height: 0},1200);
        $cont.stop().animate({height:210},1200);
    }
    $('.tab').on('click',function(){
        var tabClass=$(this).attr('class').split(' ')[1];
        $cont = $('.'+tabClass+':not(.tab)');
        var h = ($cont.height() === 0) ? tgl_conts() :  ( $cont.stop().animate({height: 0},1200) );  
    });
});

我已经将所有的代码,包括HTML和CSS复制到我自己的文档中,希望我可以将其操作成我想要的样子。我所拥有的只是JS Fiddle上的这段代码,但我仍然无法让JavaScript工作,尽管它在这个例子中工作得很好。我已经把它粘贴在两个脚本标签之间的head标签之间,但它仍然不起作用。为什么它不起作用?它放错地方了吗?我对JavaScript很陌生。

感谢

在页面上加载jQuery 1.7后,您需要加载代码片段

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
// you're code
</script>