Question

好吧..我有这个问题，似乎没有解决方案可行，看起来它甚至不可能在CSS中做到这一点，但我真的不能相信它，因为它你绝对应该做的事情之一。

$('logo-toggler').on('click', function(){
    $('#logo-box').toggleClass('no-view');    
});

<logo-toggler>Klick to open</logo-toggler>
<br>
<br>
<div id="logo-box" class="no-view">Lorem ipsum dolor sit amet...</div>

#logo-box { 
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.no-view {
    opacity: 0 !important;
    max-height: 0px !important;
}

工作正常。框应该打开和关闭。但是这里有两个问题中的第一个：如果我将max-height设置为高，过渡效果不是平滑的，所以每次我改变文本或者有另一个时我必须得到文本框的确切高度文本框。

那没关系，如果有确切的尺寸，但是没有。如果我从较小的设备查看网站，文本框会变得更高更高，直到我看不到全文，即使Box打开了。

如何将max-height更改为动态高度并获得过渡效果，因为转换显然不适用于动态高度。

Answer 1

＆＃13;

  $(function() {   
    
        var name = ('logo');
        var toggler = (name+'-toggler');
        var div = ('#'+name+'-box');
        var toggled_class = ('no-view');        
        var plus_minus_img_id = ('#'+name+'-box-image');
        
        $(toggler).on('click', function(){
            $(div).toggleClass(toggled_class)
            
            var src = ($(plus_minus_img_id).attr('src') === 'http://www.styledesign.de/webpage3/images/plus.png')
            ? 'http://www.styledesign.de/webpage3/images/minus.png'
            : 'http://www.styledesign.de/webpage3/images/plus.png';
            
            setTimeout(function(){
                $(plus_minus_img_id).attr('src', src);
            }, 500);
            
            
        });

        var height = $(div).outerHeight();
        $(div).css('max-height', height+'px');
        $(div).toggleClass(toggled_class);
})

＆＃13;

logo-toggler{
    cursor: pointer;
    display: table-cell;
}

#logo-box{ 
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    border: 1px solid black;
}

#logo-box-image{
    display: inline-block;
    vertical-align: middle;
}

.no-view{
    opacity: 0 !important;
    max-height: 0px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<logo-toggler>Logo<img id="logo-box-image" src="http://www.styledesign.de/webpage3/images/plus.png"/></logo-toggler>
                <br>
                <div id="logo-box">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
                </div>

＆＃13;

嗯，我用JQuery解决了它：

首先，我删除了课程＆＃34; no-view＆＃34;来自div id，以便它在开始时打开。我还从#logo-box中删除了max-height属性，因此没有。

然后我将此脚本添加到我的代码中：

<script>
    var height = $("#logo-box").outerHeight();
    $("#logo-box").css('max-height', height+'px');
    $('#logo-box').toggleClass('no-view');
</script>

我得到了div的高度，并将它添加到#log-box的css，不是每次都有与内容相关的正确的最大高度。

之后我通过添加类＆＃34; no-view＆＃34;。

关闭该框

那就是它。

最大高度过渡

1 个答案: