Jquery 什么是正确的方式来打开这个最大尺寸？

我又用小提琴拉我了。如果单击中的项目，它将滑动打开到特定高度

提琴显示带有一些“摘要文本”的部分（如单击打开时对全文的预览）

这样做的目的是，我在点击项目的同时加载“完整消息”，然后将其滑动打开，直到内容到达的距离为止

我的第一个想法是：

• 单击，通过AJAX或其他方式加载全文
• 将此全文放入隐藏容器中
• 获取隐藏容器的高度
• 隐藏“摘要文本”容器，显示“全文”容器
• 向上滚动到测量的高度
• 利润

嗯，我想这会管用的。但我的程序员的感觉告诉我，这是一种错误的方法。我不知道“长文本”会有多长，所以它可能只是几行，但也可能是一整篇文章

那么，哪种方法最适合滑动

打开的内容，只要内容还在？

由于关闭的

具有固定的高度，因此再次关闭它并不困难

HTML:

JS:

设置动画时，请使用属性：

元素滚动视图的高度；它包括元素 填充，但不包括其边距

因此，您的JS代码如下所示：

var state = []

$(function() {

        state[1] = true;

        $( "#effect1_1" ).click(function() {

            if ( state[1] ) {
                $( "#effect1_1" ).animate({
                    height: $( "#effect2_1" ).prop( "scrollHeight" )
                }, 1000 );
                $( "#effect2_1" ).animate({ // since scrollHeight brings the padding too, we need to remove it so the div not 'pops out' the container
                    height: $( "#effect2_1" ).prop( "scrollHeight" ) - parseInt( $( "#effect2_1" ).css( "padding-top" ), 10 ) - parseInt( $( "#effect2_1" ).css( "padding-bottom" ), 10 )
                }, 1000 );

                $( "#effect1_1" ).removeClass( "mbox_closed" ).addClass( "mbox_active" );

            } else {
                $( "#effect1_1" ).animate({
                    height: 200
                }, 1000 );
                $( "#effect2_1" ).animate({
                    height: 160
                }, 1000 );

                $( "#effect1_1" ).removeClass( "mbox_active" ).addClass( "mbox_closed" );

            }
        state[1] = !state[1];
        });
});

---

更新。

两个快速澄清的问题：显示的文本是“预览”，隐藏的文本更多？当你点击图片时，你想让图片变大，同时显示全文吗？我会澄清我的问题！不要介意图像，我已经“修复”了。当你闭嘴的时候，你会看到一个“摘要文本”，只有几行吸引读者。如果你点击它，该部分将滑开，显示全文。这可能是相关的：哦，这看起来很不错！这种转换和最大高度是否也适用于jQuery？是的，最大高度的问题在于，根据容器的高度，转换可能会有所不同。下面是一个仅具有不透明度且没有最大高度的示例。我正在制作一个示例，它将获取每个元素的高度，并将其设置为容器打开时的高度，正好符合我的要求，就是这样！不幸的是，它在IE11上不起作用。它什么也做不了。你知道为什么吗？（FF、Chrome和Opera都很好。）@Trollwut-IE不就是这样一个b****！我在mac上，所以我现在没有IE。试试这个。如果有效的话，我会更新答案。真话。不幸的是，它不起作用，仍然什么也不做（（我想这是IE发布以来的一项功能。）@Trollwut-好的，找到了问题。IE+JSFIDLE+jQUery 1.X组合在IE的JSFIDLE的iframe上生成了一个bug…在我原来的FIDLE上，如果你将jQUery的版本更改为2.1.3，它将在IE上工作。Yessir，新的jQUery版本，它可以在所有常见的浏览器上工作。太棒了！带上你50%的声誉，早上离开这个城市。

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 body, html {
    height:100%;
    padding:0;
    margin:0;
    background:#5cafff;
    font-family:'Open Sans', sans-serif;
}
.mbox {
    z-index: 1;
    margin: 2em;
    position:relative;
    background: #ff1a00;
    background: linear-gradient(to right, #ffffff 33%, #ff1a00 100%);
    border: 1px solid #fff;
    height:200px;
    clear:both;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
.mbox_closed:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
    -moz-box-shadow:  0px 0px 12px 8px rgb(128,128,128);
    -webkit-box-shadow:  0px 0px 12px 8px rgb(128,128,128);
    box-shadow:  0px 0px 12px 8px rgb(128,128,128);
}
.mbox_active {
    z-index: 1;
    margin: 2em;
    position:relative;
    background: #ff1a00;
    background: linear-gradient(to right, #ffffff 33%, #ff1a00 100%);
    border: 1px solid #fff;
    height:200px;
    clear:both;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
}
.mbox * {
    padding:0;
    margin:0;
}
.mbox_content {
    z-index: 2;
    float:left;
    padding: 20px;
    background: #ffffff;
    width:60%;
    height:160px;
    overflow: hidden;
    overflow-y: hidden;
}
.mbox img {
    z-index:-1;
    position:absolute;
    right:0;
    max-height:100%;
}
.mbox hr {
    z-index: 2;
    float:left;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: 30px;
    border-width: 15px 0 15px 20px;
    border-color: transparent transparent transparent #ffffff;
}
.mbox_bar {
    z-index: 2;
    float:right;
    width: 30;
    height: 100%;
    border-style: solid;
    border-width: 0 10px 3px 3px;
    border-color: #ffffff #ffffff #ffffff #ffffff;
}
.mbox h2 {
    text-transform: uppercase;
    font-weight:normal;
    font-size:1em;
    top:-0.7em;
    left: 0.5em;
    position:absolute;
    color:#fff;
    background:#ff1a00;
    padding:0 1em;
    border:1px solid #fff;
    border-radius:1em;
}
.mbox_content h3 {
    font-size:1.4em;
    color:#666;
    border-left:2px solid #ccc;
    padding-left: 1em;
    margin-bottom:0.5em;
}
.mbox_content h3 span {
    margin-top:0.5em;
    display:block;
    font-size:0.7em;
    text-transform: uppercase;
    font-weight:normal;
}

var state = []

$(function() {

        state[1] = true;

        $( "#effect1_1" ).click(function() {

            if ( state[1] ) {
                $( "#effect1_1" ).animate({
                    height: 600
                }, 1000 );
                $( "#effect2_1" ).animate({
                    height: 560
                }, 1000 );

                $( "#effect1_1" ).removeClass( "mbox_closed" ).addClass( "mbox_active" );

            } else {
                $( "#effect1_1" ).animate({
                    height: 200
                }, 1000 );
                $( "#effect2_1" ).animate({
                    height: 160
                }, 1000 );

                $( "#effect1_1" ).removeClass( "mbox_active" ).addClass( "mbox_closed" );

            }
        state[1] = !state[1];
        });
});

var state = []

$(function() {

        state[1] = true;

        $( "#effect1_1" ).click(function() {

            if ( state[1] ) {
                $( "#effect1_1" ).animate({
                    height: $( "#effect2_1" ).prop( "scrollHeight" )
                }, 1000 );
                $( "#effect2_1" ).animate({ // since scrollHeight brings the padding too, we need to remove it so the div not 'pops out' the container
                    height: $( "#effect2_1" ).prop( "scrollHeight" ) - parseInt( $( "#effect2_1" ).css( "padding-top" ), 10 ) - parseInt( $( "#effect2_1" ).css( "padding-bottom" ), 10 )
                }, 1000 );

                $( "#effect1_1" ).removeClass( "mbox_closed" ).addClass( "mbox_active" );

            } else {
                $( "#effect1_1" ).animate({
                    height: 200
                }, 1000 );
                $( "#effect2_1" ).animate({
                    height: 160
                }, 1000 );

                $( "#effect1_1" ).removeClass( "mbox_active" ).addClass( "mbox_closed" );

            }
        state[1] = !state[1];
        });
});