展開/摺疊div點擊多個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); 
 
\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>

Answer 1

你需要做出選擇趕屬於相同的部分，被點擊的項目的元素。此外，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; 
    }); 
});