jQuery div slideToggle with href AND animate單個元素在一個類

Question

我已經找過這個幫助，但我不太確定如何描述它。但我會盡我所能:)我有一個評論部分，我有滑入和滑出使用slideToggle（）;這很好。我使用箭頭按鈕來觸發該動畫。我遇到的問題是，當這個幻燈片放下時，我想要另一個顯示「添加註釋」的div，然後使用註釋部分進行摺疊。

這裏是我的jsfiddle鏈接：

http://jsfiddle.net/nwNh4/

的 '丟失的圖片' 是我描述過的那個箭頭。這就是需要點擊的東西。

HTML：

<div class="imageHolder"> 

     <div class="image"> 
     </div> 
     <div class="imageName"> 
      Scrubby 
      </div> 
      <div class="imageDiscrp"> 
      This is a cool image..! 
      </div> 
      <div class="comments" id="1st"> 
       <h2 class="author">Tommy Lee Jones</h2> 
       <img src="images/dash.png"/> 
       <p>fjal;kjetrl lkajehtlaker hralkjhlak eralhrl;ka rlkah erhae lrhalkerhla khlkehralke hrlakeh rlkahrlkaehrlak hrlkh</p> 

       <h2 class="author">Tommy Lee Jones</h2> 
       <img src="images/dash.png"/> 
       <p>fjal;kjetrl lkajehtlaker hralkjhlak eralhrl;ka rlkah erhae lrhalkerhla khlkehralke hrlakeh rlkahrlkaehrlak hrlkh</p> 


      </div> 

      <div class="commentLine"></div> 
      <div class="commentArrow" href="#1st"><img src="images/arrowThick.png"/></div> 
      <div class="commentAdd" id="1st">Add Comment</div> 
    </div> 




    <div class="imageHolder"> 
     <div class="image"> 

     </div> 
     <div class="imageName"> 
      Paper Girl 
     </div> 
     <div class="imageDiscrp"> 
      This is a cool image..! 
      </div> 
     <div class="comments" id="2nd"> 
       <h2 class="author">Tommy Lee Jones</h2> 
       <img src="images/dash.png"/> 
       <p>fjal;kjetrl lkajehtlaker hralkjhlak eralhrl;ka rlkah erhae lrhalkerhla khlkehralke hrlakeh rlkahrlkaehrlak hrlkh</p> 

       <h2 class="author">Tommy Lee Jones</h2> 
       <img src="images/dash.png"/> 
       <p>fjal;kjetrl lkajehtlaker hralkjhlak eralhrl;ka rlkah erhae lrhalkerhla khlkehralke hrlakeh rlkahrlkaehrlak hrlkh</p> 


      </div> 
      <div class="commentLine"></div> 
      <div class="commentArrow" href="#2nd"><img src="images/arrowThick.png"/></div> 
      <div class="commentAdd">Add Comment</div> 
    </div> 

</div> 

的jQuery：

$(document).ready(function(){ 

$('.comments , .commentAdd').hide(); 

$('.commentArrow').click(function(){ 
    var $this = $(this); 
    var port = $this.attr('href');  //finds the correct comment section 

    $(port).stop();      //stops animation if halfway through 
    $(port).slideToggle(300);    //toggles the slide effect @ 300 milliSeconds 
    $this.toggleClass('rotate'); 
    $('.commentAdd').toggle(300); 
});//end Comment Slider 

}）; //結束準備功能

CSS：

.content{ 
    width: 60%; 
    position: relative; 
    background-color: #4D494B; 
    height: 1000px; 
    clear: left; 
    left: 5%; 
    overflow:hidden; 
} 
.container{ 
    width:100%; 
    height:auto; 
    margin-top:2.5%; 
    overflow-y:hidden; 
} 
.imageHolder{ 
    width:95%; 
    margin-left:2.5%; 
    margin-bottom:5%; 
    min-height:100px; 
    background-color:#fff; 
} 
.image{ 
    text-align:center; 
} 
.image img{ 
    padding:2%; 
    max-width: 85%; 
} 
.imageName{ 
    padding-left: 2.5%; 
    padding-bottom: 1.5%; 
    display: block; 
    background-color: rgba(255, 255, 255, 0.53); 
    font-family: 'Noto Sans', sans-serif; 
    font-size: 2em; 
    font-weight: bold; 
    color:#4D494B; 
} 
.imageDiscrp{ 
    display:block; 
    color: #858585; 
    padding-left: 2.5%; 
    padding-bottom: 1%; 
} 
.comments{ 
    padding-left:2.5%; 
    padding-bottom:2.5%; 
    width:100%; 
    color: #CCC; 
    background-color: #4D494B; 
} 
.commentLine{ 
    width:100%; 
    height:5px; 
    background-color:#F4812A; 
} 
.commentArrow{ 
    float:right; 
    margin-right:2%; 
    width: 5%; 
    cursor:pointer; 
} 
.commentArrow img{ 
    width: 100% 
} 
.comments img{ 
    position: relative; 
    left: -2.5%; 
    top: -15px; 
    width: 1.5%; 
} 
.comments h2{ 
    padding-top:2.5%; 
} 
.comments p{ 
    padding-left:1%; 
    width:68% 
} 
.commentAdd{ 
    display: block; 
    width: 11%; 
    text-align: center; 
    line-height: 37px; 
    height: 33px; 
    background-color: #F4812A; 
    color: #4D494B; 
    font-size: 0.9em; 
    float: right; 
    position: relative; 
    top: -35px; 
    right: 4%; 
} 
.rotate { 
    position: relative; 
    top: -31px; 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 
} 

Answer 1

DEMO

我加入

$(this).closest('.imageHolder').siblings('.imageHolder').find('.comments').hide(); 

---

你的js代碼變得

$('.commentArrow').click(function() { 
    var $this = $(this); 
    var port = $this.attr('href'); //finds the correct comment section 
    $(port).stop(); //stops animation if halfway through 
    $(port).slideToggle(300); //toggles the slide effect @ 300 milliSeconds 
    $this.toggleClass('rotate'); 
    $('.commentAdd').toggle(300); 
    $(this).closest('.imageHolder').siblings('.imageHolder').find('.comments').hide(); 
}) 

---

參考

.find()

.siblings()

.closest()