Question

我有以下代码，我试图默认隐藏第二段，并在点击蓝色圆圈时显示它，并展开该段应显示的

这是代码

＆＃13;

$(document).ready(function() {
  // Store inner height in a data property:
  $(".added-msg-inner").removeClass("added-msg-inner").each(function() {
    $(this).data({
      innerHeight: $(this).height()
    });
  }).addClass('added-msg-inner');
  $(".added-msg-inner > p:nth-child(2)").hide();
  $(".downarrow").click(function() {
    // Get specific divView and innerHeight related to this down arrow
    var $divView = $(this).siblings(".added-msg-inner");
    var innerHeight = $divView.data("innerHeight");

    $divView.animate({
      height: $divView.height() == 95 ? innerHeight : "95px"
    }, 500);
    $('i', this).attr("class",
      $divView.height() == 95 ? "fa fa-angle-up" :
      "fa fa-angle-down");
    return false;

    var $minHeight = 95;
    if ($(this).height() > $minHeight) {
      $(".added-msg-inner > p:nth-child(2)").show();
    }
  });
});

＆＃13;

.added-msg2 {
  padding: 3% 1%;
  float: left;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  color: #333333;
  position: relative;
  background-color: #e0e0e0;
}

.added-msg-inner {
  float: left;
  width: 100%;
  height: 95px;
  overflow: hidden;
}

.downarrow {
  position: absolute;
  right: 15px;
  bottom: -12px;
  z-index: 1;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  color: #fff;
  background-color: #003478;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="added-msg2">
  <div class="added-msg-inner">
    <p>Message added by agent user on<br> Sat, Jun 24th, 2017 (5:03AM)</p>
    <p>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</p>
    <p><i class="fa fa-paperclip" aria-hidden="true"></i> ABCFileName.pdf</p>
  </div>
  <div class="downarrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
</div>

＆＃13;

Answer 1

只需删除.added-msg2 { padding: 3% 1%; float: left; width: 100%; box-sizing: border-box; font-size: 14px; color: #333333; position: relative; background-color: #e0e0e0; } .added-msg-inner { float: left; width: 100%; height: 95px; overflow: hidden; } .downarrow { position: absolute; right: 15px; bottom: -12px; z-index: 1; width: 30px; height: 30px; line-height: 30px; font-size: 18px; color: #fff; background-color: #003478; border-radius: 50%; text-align: center; font-weight: bold; cursor: pointer; }语句并使用jQuerys animate()方法的回调函数在动画结束后显示段落：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="added-msg2">
  <div class="added-msg-inner">
    <p>Message added by agent user on<br> Sat, Jun 24th, 2017 (5:03AM)</p>
    <p>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</p>
    <p><i class="fa fa-paperclip" aria-hidden="true"></i> ABCFileName.pdf</p>
  </div>
  <div class="downarrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
</div>

＆＃13;

b1Image()

＆＃13;

onload="b1Image()"

＆＃13;

Answer 2

我修改了你的代码，以便加载时隐藏第2段（消息），点击蓝色圆圈时，段落会滑开。

我不确定段落上某些样式的目的，所以我删除了它。父div的高度将自动扩展，因此可能不需要溢出隐藏等。

很多JS看起来可能没必要，我在下面添加的片段足以扩展你所描述的段落。另外，我在HTML（段落）中添加了一些语义类。

以下是代码：

$(document).ready(function() {
  $('.downarrow').on("click", function() {
    $('.added-msg-content').slideToggle();
  });
});

.added-msg2 {
  padding: 3% 1%;
  float: left;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  color: #333333;
  position: relative;
  background-color: #e0e0e0;
}

.added-msg-inner {
  float: left;
  width: 100%;
}

.downarrow {
  position: absolute;
  right: 15px;
  bottom: -12px;
  z-index: 1;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  color: #fff;
  background-color: #003478;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.added-msg-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="added-msg2">
  <div class="added-msg-inner">
    <p class="added-msg-author">Message added by agent user on<br> Sat, Jun 24th, 2017 (5:03AM)</p>
    <p class="added-msg-content">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</p>
    <p><i class="fa fa-paperclip" aria-hidden="true"></i> ABCFileName.pdf</p>
  </div>
  <div class="downarrow"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
</div>

根据div高度显示/隐藏段落

2 个答案: