单击时展开/折叠多个div

Question

我已经创建了展开/折叠div，当有单个内容div时，它工作得很好当我有多个它的展开/折叠所有时，我如何让它对单个内容div工作？

代码如下：

​

$(document).ready(function() {
 var $divView = $(".added-msg-inner");
 var innerHeight = $divView.removeClass("added-msg-inner").height();
 $divView.addClass('added-msg-inner');
 $(".downarrow").click(function() {
      $(".added-msg-inner").animate({
          height: (($divView.height() == 75)? innerHeight  : "75px")
        }, 500);
		if($(".added-msg-inner").height() == 75){
    $('.downarrow > i').attr("class","fa fa-angle-up");
  }
  else{
	$('.downarrow > i').attr("class","fa fa-angle-down");
  }
        return false;
    });
});

.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: 75px;
	overflow: hidden;
  margin-bottom:15px;
}
.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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/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="col-xs-12 lt-grey-bg mar-bot-25">
      <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>
    </div>
    <div class="col-xs-12 lt-grey-bg mar-bot-25">
      <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>
    </div>

​

Answer 1

您需要让选择器捕获与单击的项属于同一部分的元素。此外，innerHeight和$divView不再是单个值。我建议将计算出的数据存储在相关$divView元素的innerHeights属性中：

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

    $(".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() == 75 ? innerHeight : "75px"
        }, 500);
        $('i', this).attr("class", 
            $divView.height() == 75 ? "fa fa-angle-up"
                                    : "fa fa-angle-down");
        return false;
    });
});