Question

我正在开发一个包含许多动态模块的Web应用程序。在这些模块中，我有一个文本容器，我无法控制未来管理员在这个容器内写的内容。

所以我已经为容器设置了一个固定的max-height，我添加了一个“阅读更多”的按钮，如果有任何用户点击它，它将更改max-height。（然后再次点击它）

如果文字太短，显然不会有“阅读更多”选项，因为没有更多文字要显示。

我的问题是。如果文本容器未达到固定(display:none)，是否可以隐藏按钮max-height？（或者如果达到max-height则显示。）

HTML示例：

<div class="text height">                         
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum                      
</div>
<div class="link">                
<a id="readmore" href="javascript:changeheight()">Read more</a>
</div>

基本CSS：

.text {
    overflow:hidden;
}
.height {
    max-height:38px;
}
.heightAuto {
    max-height:5000px;
}

和我的小javascript：

function changeheight() {
        var readmore = $('#readmore');
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
        } else {
            readmore.text("Read more");
        }           

        $('.height').toggleClass("heightAuto");
    };

JSFIDDLE

我基本上使用HTML和CSS工作，并且对javascript / jquery知之甚少，所以如果你认为只是转向css，对我来说这将是一个更好的选择。然而，任何解决方案都会得到很好的解释。

是的，在改变高度时是否可以进行一些过渡，这样看起来会更流畅？（这是我的贪婪，如果你认为我过去寻求帮助，请随意忽略这个问题）。

提前多多感谢，并原谅我可怜的英语。

Answer 1

使用以下代码 Working Demo Here

$(function()
 {
     var curHeight = $('.text').height();     
     if(curHeight==38)
         $('#readmore').show();
     else
         $('#readmore').hide();
 });     
function changeheight() {
        var readmore = $('#readmore');
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
        } else {
            readmore.text("Read more");
        }           

        $('.height').toggleClass("heightAuto");
    };

您可以在.ready函数中获取Height的{{1}}，并将该高度与最大高度进行比较。如果高度等于最大高度，那么我们需要div'阅读更多'链接，或者如果高度不等于最大高度，那么我们可以.show()'阅读更多'链接。

<强> JsFiddle here

Answer 2

尝试实现类似的东西：

$(document).ready(function(){
      if($( ".text" ).height() <39){
            $('#readmore').hide();// if want show this div using $( ".text" ).hide();
        }

        // hide the link using $('#readmore').hide();
  });
function changeheight() {
    var readmore = $('#readmore');
    if (readmore.text() == 'Read more') {
        readmore.text("Read less");
    } else {
        readmore.text("Read more");
    }      
    if($( ".text" ).height() >39){
        $('#readmore').show();
    }
    if($( ".text" ).height() <39){
        $('#readmore').hide();
    }
    $('.height').toggleClass("heightAuto");
};

相应地更改切换。

Answer 3

我理解你的英文

在您的JSFIDDLE代码上尝试此操作： htmlCode：

<div class="text height" id="text">                         
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum                      
 </div>
 <div class="link">                
      <a id="readmore" href="#" onclick="changeheight(this)">Read more</a>
 </div>

cssCode：

.text {
    overflow:hidden;
}
.height {
    height:38px;
    overflow:hidden;
}

的javascript

 $(document).ready(function(){
    $('.text').each(function(element,index){
        if($(this)[0].scrollHeight>$(this).height()){
            $(this).next().show()
        }else{
            $(this).next().hide()
        }
    })
})

function changeheight(obj) {
        var fullHeight = $(obj).parent().prev().get(0).scrollHeight        
        var readmore = $(obj);
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
            $(obj).parent().prev().data('oldHeight',$(obj).parent().prev().height())
            $(obj).parent().prev().animate({'height':fullHeight},350)
        } else {
            readmore.text("Read more");
           $(obj).parent().prev().animate({'height':$(obj).parent().prev().data('oldHeight')},350)
        }           
    };

运行代码

注意：调整大小时页面布局可能会失真。

JSFieddle

如果容器高度小于固定量，则隐藏元素

3 个答案: