Javascript 根据div高度显示展开/折叠按钮
我有一个Div，如果它高于68px，我希望它隐藏其余的内容，并显示一个扩展它的选项 问题是我不知道如何检测div是否高于68px。特别是因为div反应灵敏 我曾尝试使用PHP计算字符数，并根据字符数显示展开按钮。但是这种技术非常不精确，因为有些字符比其他字符宽 这是我试图解决此问题的网站： 正如您所理解的，它是响应性的，因此这使问题更加困难。中间框“弱对抗”不需要扩展 这是一张照片： 我正在尝试使用JavaScript/CSS/HTML找到解决方案Javascript 根据div高度显示展开/折叠按钮,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我有一个Div，如果它高于68px，我希望它隐藏其余的内容，并显示一个扩展它的选项 问题是我不知道如何检测div是否高于68px。特别是因为div反应灵敏 我曾尝试使用PHP计算字符数，并根据字符数显示展开按钮。但是这种技术非常不精确，因为有些字符比其他字符宽 这是我试图解决此问题的网站： 正如您所理解的，它是响应性的，因此这使问题更加困难。中间框“弱对抗”不需要扩展 这是一张照片： 我正在尝试使用JavaScript/CSS/HTML找到解决方案 非常感谢您您可以使用jQuery： jQuer
非常感谢您您可以使用jQuery：
jQuery（'.expandClicker'）。每个（函数（）{
if（jQuery（this.parent（）.height（）<68）{
jQuery（this.fadeOut（）；
}
});
fadeOut（）带有：
jQuery(this).css({'display':'none'});
首先，我不建议使用屏幕截图中每个单元格只有一行和一列的表
我建议用一个额外的div（内包装器）包装文本，并在外包装器上使用max-width。通过JS，您可以比较内包装的高度是否大于外包装的（最大）高度。如果为正，则将类添加到外部包装器。此类触发“阅读更多”链接的可见性
我不会提供JSFIDLE或任何代码，因为您没有提供任何源代码。我不想在链接页面上使用开发人员工具在JSFIDLE中重新创建页面。我建议使用jQuery查看css类的宽度属性
关于div的响应：
在css中，当屏幕较小（最大宽度：980px）时，框的宽度为100%，当屏幕>1300px时，框的宽度为32.8%。因此，您可以编写一个脚本，查看width属性并相应地执行操作，即如果宽度为32.8%，则检查高度并应用逻辑以确定高度是否大于所需（）
关于查找高度：
正如其他人所说，应用高度就是查看div的height属性。如果它大于所需的max height，则应用所需的css
关于阅读更多内容：
看看这个例子：
它实际上是在PHP中所做的，它查看字符数，并表示如果尚未单击“阅读更多”，则在最后一个最大字符后拆分文本，然后将其余文本放入隐藏范围
如果按“读取更多”，则在已显示文本旁边显示隐藏范围内的所有文本
以下是该代码笔中的代码：
<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>
jQuery多读/少读切换示例
.Morespan内容{
显示：无；
}
莫林克先生{
显示：块；
}
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
Morbi placerat是一位白种人。这是一种精英阶层的生活方式，是一种世袭的生活方式。不，这是一种生活方式。库拉比图尔·萨皮恩·马萨。这是一句名言。整型三分音符leo Concetetur libero pretium pretium。努克·塞德·莫里斯·马格纳。猪痘。大教堂的教堂是空的，我们的教堂是圆的。Donec et feugiat sem，ac rhoncus mauris。奎斯克·埃吉特·泰尔马萨。
$（文档）.ready（函数（）{
//配置/自定义这些变量。
var showChar=100；//默认显示多少个字符
var ellipseText=“…”；
var moretext=“显示更多>”；
var lesstext=“显示较少”；
$（'.more'）。每个（函数（）{
var content=$（this.html（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（showChar，content.length-showChar）；
var html=c+''+ellipseText+''+h+''；
$（this）.html（html）；
}
});
$（“.morelink”）。单击（函数（）{
if（$（this）.hasClass（“更少”））{
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
}否则{
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
}
$（this.parent（）.prev（）.toggle（）；
$（this.prev（）.toggle（）；
返回false；
});
});
谢谢您的回答。你能告诉我为什么在这种情况下不建议使用表格吗？我同意你的观点（这是一年前创建的，当时我还是一个非常新手的开发人员），但我很想知道是否有任何特别的缺点。当你可以使用一个包含所有三个单元格的表（可能是你的外包装器）或根本不使用表时，为每个单元格使用一个新表，你会获得什么利润。您应该只使用表来实际显示表数据。其他一切都是坏习惯。我会改用网格系统（比如bootstrap），并使用它预定义的易响应特性。