展开/折叠div点击多个div
问题描述:
我已经创建了展开/折叠div和其工作正常,当有单个内容div
当我有多个展开/折叠所有,我如何让它工作的个人内容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);
\t \t if($(".added-msg-inner").height() == 75){
$('.downarrow > i').attr("class","fa fa-angle-up");
}
else{
\t $('.downarrow > i').attr("class","fa fa-angle-down");
}
return false;
});
});
.added-msg2 {
\t padding: 3% 1%;
\t float: left;
\t width: 100%;
\t box-sizing: border-box;
\t font-size: 14px;
\t color: #333333;
\t position: relative;
\t background-color: #e0e0e0;
}
.added-msg-inner {
\t float: left;
\t width: 100%;
\t height: 75px;
\t overflow: hidden;
margin-bottom:15px;
}
.downarrow {
\t position: absolute;
\t right: 15px;
\t bottom: -12px;
\t z-index: 1;
\t width: 30px;
\t height: 30px;
\t line-height: 30px;
\t font-size: 18px;
\t color: #fff;
\t background-color: #003478;
\t border-radius: 50%;
\t text-align: center;
\t font-weight: bold;
\t 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>
答
你需要做出选择赶属于相同的部分,被点击的项目的元素。此外,innerHeight
和$divView
不再是单个值。我建议将计算的innerHeights存储在相关的$divView
元素的数据属性中:
$(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;
});
});
感谢您提供详细的答案和解释,+1 –