移動子が動的に昨日のjQuery

Question

とのdivの高さを計算した後、私はdiv要素の高さを計算し、それをクリックしたとき、それの内側に溢れたテキストに合わせて調整する方法を尋ねた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>