带有 href 的 jQuery div slideToggle 和动画类中的单个元素

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