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;
}

用jQuery计算div的高度后动态移动子div

1 个答案: