1

I have looked around for this help, but I am not really too sure how to describe it. But I will do my best :) I have a comment section that I have slide in and out using slideToggle(); and that works great. I use an arrow button to trigger that animation. The issue I am having is that when this slides down I want to have another div that shows up for 'Add Comment' and then to collapse with the comment section.

Here is my jsFiddle link:

http://jsfiddle.net/nwNh4/

The 'Missing Image' is the arrow I had described. That is what needs to be clicked.

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

});//end ready function

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);
}
4

1 回答 1

0

演示

我加了

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


参考

。寻找()

。兄弟姐妹()

.closest()

于 2013-10-28T02:20:02.657 回答