jquery - 隐藏/显示带有动画的div

我有3个分区，我想使用Jquery隐藏/显示带有动画的<div id="framecontentLeft">。我尝试并遵循了一些有关如何执行此操作的教程和演示，但是为什么它不起作用。

如果#framecontentTop{隐藏，如何自动获取#maincontent{ #framecontentLeft的宽度，如果显示#framecontentLeft，又如何恢复到其原始宽度？

这是我的完整剧本。有什么帮助吗？

<script type="text/javascript">
$(document).ready(function(){

        $("#framecontentLeft").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $("#framecontentLeft").slideToggle();
    });

});

</script>
<style>
body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    }

    #framecontentLeft, #framecontentTop{
    position: absolute;
    top: 0;
    left: 0;
    width: 150px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: silver;
    color: white;
    }

    #framecontentTop{
    left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 0;
    width: auto;
    height: 120px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background: green;
    color: white;
    }

    #maincontent{
    position: fixed;
    left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    top: 120px; /*Set top value to HeightOfTopFrameDiv*/
    right: 0;
    bottom: 0;
    overflow: auto;
    }

    .innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }

    * html body{ /*IE6 hack*/
    padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
    }

    * html #maincontent{ /*IE6 hack*/
    height: 100%;
    width: 100%;
    }

    * html #framecontentTop{ /*IE6 hack*/
    width: 100%;
    }

.show_hide {
    display:none;
}
</style>


<a href="#" class="show_hide">Show/hide</a>


<div id="framecontentLeft">
    <div class="innertube">
 <a href="#" class="show_hide">hide</a>
    </div>
    </div>

    <div id="framecontentTop">
    <div class="innertube">

    </div>
    </div>

    <div id="maincontent">
    <div class="innertube">

    </div>
    </div>

最佳答案

http://jsfiddle.net/jqYLE/1/

它不起作用的原因是因为您使用的是.framecontentLeft而不是#framecontentLeft

$(document).ready(function(){

        $("#framecontentLeft").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $("#framecontentLeft").slideToggle();
    });

});

关于jquery - 隐藏/显示带有动画的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21104241/