所以我有 6 个具有相同高度的不同 div。每个 div 都有不同的内容，这意味着它们的内容长度不一定相同。
现在我希望内容较长的 div 有一个“阅读更多”按钮，然后展开 div 以显示其全部内容。我做对了那部分。
但是，我如何才能以“阅读更多”的方式对其进行编码，使其仅显示在内容较长且超过 div 高度的 div 上？
$('a').click(function() {
var p = $('a').prev('p')
var lineheight = parseInt(p.css('line-height'))
if (parseInt(p.css('height')) == lineheight * 3) {
p.css('height', 'auto');
$(this).text('Less')
} else {
p.css('height', lineheight * 3 + 'px');
$(this).text('More')
}
});.inner-one h3,
.inner-two h3,
.inner-three h3,
.inner-four h3,
.inner-five h3,
.inner-six h3 {
padding-left: 55px;
position: relative;
padding-top: 20px;
padding-right: 20px;
font-weight: bold;
}
.inner-one p,
.inner-two p,
.inner-three p,
.inner-four p,
.inner-five p,
.inner-six p {
padding-left: 20px;
padding-right: 20px;
line-height: 18px;
height: 54px;
overflow: hidden;
}
.one,
.two,
.three,
.four,
.five,
.six {
background: #fff;
margin-top: 30px;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="one">
<div class="inner-one">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
<a>More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="two">
<div class="inner-two">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
<a>More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="three">
<div class="inner-three">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
<a>More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="four">
<div class="inner-four">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
<a>More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="five">
<div class="inner-five">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
<a>More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="six">
<div class="inner-six">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
<a>More</a>
</div>
</div>
</div>
</div>
</div>最佳答案
我会这样做(代码中的注释)。我还添加了通用类，使绑定(bind) jquery 事件更容易，并获得 css 的好处，例如更容易阅读代码、更少膨胀(更快的页面加载)等
$('.inner').each(function() {
var $inner = $(this),
pTag = $inner.find('p').eq(0).get(0), // get js object of first p
isOverflowing = pTag.clientHeight < pTag.scrollHeight; // see if it is overflowing
if (isOverflowing) {
$inner.append('<a href="#" class="more">More</a>'); // if it is append the a
}
});
$(document).on('click', '.more', function(e) { // delegated event binding for more anchors
e.preventDefault();
var $link = $(this),
$p = $link.prev('p');
if ($link.text() == 'More') {
$link.text('Less'); // show text
$p.data('height', $p.outerHeight());
$p.height($p.get(0).scrollHeight);
} else {
$link.text('More'); // hide text
$p.height($p.data('height'));
}
}).inner-one h3,
.inner h3 {
padding-left: 55px;
position: relative;
padding-top: 20px;
padding-right: 20px;
font-weight: bold;
}
.inner p {
padding-left: 20px;
padding-right: 20px;
line-height: 18px;
height: 54px;
overflow: hidden;
transition: height 0.5s ease-in-out;
}
.outer {
background: #fff;
margin-top: 30px;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="outer one">
<div class="inner inner-one">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="outer two">
<div class="inner inner-two">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="outer three">
<div class="inner inner-three">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="outer four">
<div class="inner inner-four">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="outer five">
<div class="inner inner-five">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="outer six">
<div class="inner inner-six">
<h3>TITLE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>关于javascript - 如何根据内容的长度使 div 可扩展？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48806650/