Question

我有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>

Answer 1

应该是：

$(document).ready(function(){

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

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

});

说明：#framecontentLeft按其ID选择元素，其中.framecontentLeft按类选择元素。

Answer 2

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

它无效的原因是因为您使用的是.framecontentLeft而不是#framecontentLeft

$(document).ready(function(){

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

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

});

用动画隐藏/显示div

2 个答案: