移动子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>