![](/img/trans.png)
[英]After using .height() on parent div, child elements that change heights no longer effect the parent's height, why?
[英]Change parent's height to child's height
我正在使用jquery插件dotdotdot在一段文本后創建“ ... Read More >>”。 當用戶單擊鏈接(“閱讀更多>>”)時,div必須展開,以便整個文本可見。 第一部分效果很好,但我不知道第二部分。
這是我的代碼:
<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dotdotdot.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#dot3').dotdotdot({
after: 'a#test'
});
});
<style type="text/css" media="all">
div.example {
padding: 0 0 150px 0;
}
div.example:after {
content: '';
display: block;
clear: both;
}
div.r {
width: 275px;
}
div.box {
border: 1px solid #ccc;
height: 160px;
padding: 15px 20px 10px 20px;
overflow:visible;
}
</style>
<div class="example">
<div class="r">
<div class="box after" id="dot3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<a href="#" id="test" onClick="">Read more »</a></div>
</div>
</div>
只需調用銷毀,並調整div的大小即可。 嘗試
$("#test").click(function() {
var div = $('#dot3');
div.trigger('destroy');
div.css("height", "auto");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.