我有一个 Div，如果它高于 68px，我希望它隐藏其余内容并显示一个选项来展开它。
问题是我不知道如何检测 div 何时高于 68px。特别是因为 div 是响应式的。
我尝试用 PHP 计算字符数，并根据字符数显示展开按钮。但是这种技术非常不精确，因为有些字符比其他字符宽。
这是我试图解决这个问题的网站:http://www.metagame.gg/champions/azir#comp
如您所知，它是响应式的，因此这使问题变得更加困难。中间框“Weak Against”不需要展开。
这是一张图片:
我正在尝试使用 JavaScript/CSS/HTML 找到解决方案
非常感谢您
最佳答案
我建议使用 jQuery 查看 css 类的 width 属性。
关于响应式 div:
在您的 css 中，当屏幕较小时(最大宽度:980px)，框的宽度为 100%，当屏幕宽度 > 1300px 时，框的宽度为 32.8%。因此，您可以编写一个脚本来查看宽度属性并采取相应措施，即如果宽度为 32.8%，则检查高度并应用逻辑以判断高度是否大于所需值 (see article here)。
关于求高度:
应用高度就像其他人说的，看div的height属性的情况。如果它大于您所需的最大高度，则应用所需的 css。
关于阅读更多:
看看这个例子:
它本质上做的是您在 PHP 中尝试做的事情，它查看字符数并说明是否尚未单击阅读更多内容，然后在最后一个最大字符后拆分文本，然后将隐藏范围内的其余文本。
如果按下阅读更多，则显示隐藏范围内的所有文本以及已显示的文本。
http://codepen.io/maxds/pen/jgeoA/
这是该代码笔中的代码:
<html>
<head>
<title>jQuery Read More/Less Toggle Example</title>
<style>
.morecontent span {
display: none;
}
.morelink {
display: block;
}
</style>
</head>
<body>
<span class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
<script type="text/javascript">
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
</body>
</html>
关于javascript - 根据 div 高度显示展开/折叠按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36737307/