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

Question

我有以下代码，我试图默认隐藏第 2 段，并在单击蓝色圆圈和展开该段落时显示该段落时显示它

这是代码

$(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();
    }
  });
});

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

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

Answer 1

我已经修改了您的代码，以便第二段(消息)在加载时隐藏，并在蓝色圆圈单击时滑动打开该段落。

我不确定该段落中某些样式的用途，因此我将其删除。父 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>