移動子DIV計算div的高度與jQuery

Question

昨天后動態我問怎麼計算div的高度並調整它根據它裏面的溢出的文字就可以了，當點擊：Calculate height according to div's inner text

我現在有兩個按鈕（glyphicons ），如果點擊將允許您編輯文本或刪除帖子。

但是，問題是這些圖標不會出現在計算高度的div中。

<!-- should expand --> 
<div class="container-fluid" id="content-fluid"> 
    <div class="container-update"> 
    <div class="update-group"> 
     <div class="update-header"> 
     HEADER 
     <div class="update-author"> 
      by CREATOR 
     </div> 
     </div> 
     <div class="update-body"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum sodales massa ac consectetur. Maecenas eu nisl vel erat pellentesque eleifend ut a est. Nullam ac lorem nisi, eu consequat nisi. In euismod porttitor adipiscing. Aenean feugiat, 
     turpis nec accumsan posuere, diam tellus pharetra arcu, sit amet ultrices magna felis ac elit. Donec sit amet massa nisi, sed semper turpis. Aliquam fringilla vestibulum urna, in tincidunt dui facilisis condimentum. Integer eget enim lectus, id 
     congue ipsum. Sed sit amet ante nec turpis mattis venenatis. In urna quam, cursus vel cursus eu, volutpat eget leo. Praesent in mi diam. 
     </div> 
     <div class="updateOptions-hidden"> 
     <a href="editupdate.php?id="><i class="glyphicon glyphicon-wrench"></i></a> 
     <a href="removephp.php?id="><i class="glyphicon glyphicon-remove-sign"></i></a> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

#content-fluid { 
    width: 100%; 
    height: 0 auto; 
    margin-top: 55px; 
    background-color: transparent !important; 
} 

.container-update { 
    margin-top: 10px; 
    margin-left: 10px; 
} 

.update-group { 
    width: 30%; 
    background-color: rgba(84, 84, 84, 0.8); 
    border-radius: 5px; 
    color: white; 
    padding: 5px; 
    margin-top: 20px; 
    margin-bottom: -50px; 
    transition: .5s; 
    min-height: 1%; 
    height: 6em; 
    max-height: 100%; 
    overflow: hidden; 
} 

.update-group:hover { 
    background-color: rgba(54, 54, 54, 1); 
} 

.update-header { 
    overflow: auto; 
    padding-bottom: 5px; 
    border-bottom: 1px solid #000; 
} 

.update-author { 
    font-size: 10px; 
    font-family: sans-serif; 
    margin-right: 0px; 
    float: right; 
    text-align: right; 
    margin-top: 5px; 
} 

.update-body { 
    margin-top: 10px; 
} 

.updateOptions-hidden { 
    display: inline-block; 
    position: relative; 
    float: left; 
    border-radius: 12px; 
    transition: .1s; 
    top: 5px 
} 

.glyphicon-wrench, 
.glyphicon-remove-sign { 
    color: white; 
    transition: .5s; 
} 

一個例子：https://jsfiddle.net/vz6s9brd/14/

注意：我已經發現，它是由父母的DIV的overflow屬性造成的。但我無法避免使用它，因爲它屬於整個事物的功能。

可以解決這個問題嗎？如果沒有，是否可以將圖標放在父級div的邊緣之外並保持與其相關聯？

Answer 1

jQuery(function($) { 
 
    $('.update-group').click(function() { 
 
    this.open ^= 1; 
 
    var $body = $(this).find('.update-body'); 
 
    $body.animate({ 
 
     height: this.open ? $body[0].scrollHeight : "3em" 
 
    }); 
 
    }); 
 
});

body { 
 
    overflow-y: scroll; 
 
    margin: 0; 
 
} 
 
#content-fluid { 
 
    width: 100%; 
 
    height: 0 auto; 
 
    /*margin-top: 55px;*/ 
 
    background-color: transparent !important; 
 
} 
 
.container-update { 
 
    margin-top: 10px; 
 
    margin-left: 10px; 
 
} 
 
.update-group { 
 
    width: 30%; 
 
    background-color: rgba(84, 84, 84, 0.8); 
 
    border-radius: 5px; 
 
    color: white; 
 
    padding: 5px; 
 
    /*margin-top: 20px;*/ 
 
    /*margin-bottom: -50px;*/ 
 
    transition: .5s; 
 
    /*min-height: 1%;*/ 
 
    /*height: 6em; NOOOOO WHY?! set to the body content instead! */ 
 
    /*max-height: 100%;*/ 
 
    /*overflow: hidden; no need any more */ 
 
} 
 
.update-body { 
 
    /* ADD THIS! */ 
 
    position: relative; 
 
    height: 3em; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 
.update-group:hover { 
 
    background-color: rgba(54, 54, 54, 1); 
 
} 
 
.update-header { 
 
    overflow: auto; 
 
    padding-bottom: 5px; 
 
    border-bottom: 1px solid #000; 
 
} 
 
.update-author { 
 
    font-size: 10px; 
 
    font-family: sans-serif; 
 
    margin-right: 0px; 
 
    float: right; 
 
    text-align: right; 
 
    margin-top: 5px; 
 
} 
 
.update-body { 
 
    margin-top: 10px; 
 
} 
 
.updateOptions-hidden { 
 
    display: inline-block; 
 
    position: relative; 
 
    border-radius: 12px; 
 
    transition: .1s; 
 
    top: 5px 
 
} 
 
.glyphicon-wrench, 
 
.glyphicon-remove-sign { 
 
    color: white; 
 
    transition: .5s; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- shouldn't expand --> 
 
<div class="container-fluid" id="content-fluid"> 
 
    <div class="container-update"> 
 
    <div class="update-group"> 
 
     <div class="update-header"> 
 
     HEADER 
 
     <div class="update-author"> 
 
      by CREATOR 
 
     </div> 
 
     </div> 
 
     <div class="update-body"> 
 
     TEST 
 
     </div> 
 
     <div class="updateOptions-hidden"> 
 
     <a href="editupdate.php?id="><i class="glyphicon glyphicon-wrench"></i></a> 
 
     <a href="removephp.php?id="><i class="glyphicon glyphicon-remove-sign"></i></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- should expand --> 
 
<div class="container-fluid" id="content-fluid"> 
 
    <div class="container-update"> 
 
    <div class="update-group"> 
 
     <div class="update-header"> 
 
     HEADER 
 
     <div class="update-author"> 
 
      by CREATOR 
 
     </div> 
 
     </div> 
 
     <div class="update-body"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum sodales massa ac consectetur. Maecenas eu nisl vel erat pellentesque eleifend ut a est. Nullam ac lorem nisi, eu consequat nisi. In euismod porttitor adipiscing. Aenean feugiat, 
 
     turpis nec accumsan posuere, diam tellus pharetra arcu, sit amet ultrices magna felis ac elit. Donec sit amet massa nisi, sed semper turpis. Aliquam fringilla vestibulum urna, in tincidunt dui facilisis condimentum. Integer eget enim lectus, id 
 
     congue ipsum. Sed sit amet ante nec turpis mattis venenatis. In urna quam, cursus vel cursus eu, volutpat eget leo. Praesent in mi diam. 
 
     </div> 
 
     <div class="updateOptions-hidden"> 
 
     <a href="editupdate.php?id="><i class="glyphicon glyphicon-wrench"></i></a> 
 
     <a href="removephp.php?id="><i class="glyphicon glyphicon-remove-sign"></i></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>