做一个jQuery的元素向上滑动，如果另一个被点击

Question

好了，所以我要寻找一个类似的功能像我这个页面上找到：http://jsfiddle.net/B6TZS/

我需要几乎同样的事情。事实上，向下滑动是直接在单击的元素下。不同之处在于我需要从每个元素的数据中加载某些数据。我希望数据在div滑落时淡入。另外，当点击一个不同的网格元素时，我希望动画能够淡入淡出，并以淡入淡出的方式向下滑动。下面是我的代码。我越来越挂上如何应用活动类，以及如何确定如何删除链接到过渡动画的链接。

<div class="container leaderShipwrapper gallery-items"> 
    <ul id="items" class="row list-unstyled"> 
     <div class="col-sm-12 col-sm-offset-1 leaderShipgrid"> 
      <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
      <li class="col-sm-2 col-xs-4 leader" data-name="ray" data-title="dunce" data-profile="dunce profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
      <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
      <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
      <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><img class="image-responsive" src="images/leader.jpg" alt="" /></li> 
     </div> 
     <div class="col-sm-10 col-sm-offset-1"> 
      <li id="1" class="leaderDescription"><div class="leaderName"></div><div class="leaderTitle"></div><div class="leaderProfile"></div></li> 
     </div> 
    </ul> 
</div> 

<script> 
     $('.leaderDescription').hide(); 
     $('.leader').click(function(){ 


    if ($(this).hasClass('active')){ 
     /* hide the next content div*/ 
     $(this).next('.leaderDescription').slideUp(); 
     /* and remove the active class*/ 
     $(this).toggleClass('active'); 
    } 
    else { 
     /* slide the content div down */ 

     $(this).next('.leaderDescription').slideDown(); 
     /* and add the active class*/ 
     $(this).addClass('active').slideDown('slow'); 

    } 


    $(this).parent().siblings().find('.leaderDescription').find('.leaderName').text($(this).attr('data-name')); 
    $(this).parent().siblings().find('.leaderDescription').find('.leaderTitle').text($(this).attr('data-title')); 
    $(this).parent().siblings().find('.leaderDescription').find('.leaderProfile').text($(this).attr('data-profile')); 
    $(this).parent().siblings().find('.leaderDescription').slideDown('slow').addclass('active'); 


    }); 
</script> 

好的，所以我认为新的问题是与JavaScript。这是当我点击第一行的第一个框时正在发生的事情的照片。

Answer 1

早上好，

我会尝试这样的事：基于评论

<script> 
    $('.leaderDescription').hide(); 
    $('.leader').click(function(){ 

     var descriptionDiv = $(".leaderDescription"); 

     if ($(this).hasClass('active')){ 
      // hide the content div 
      $(descriptionDiv).slideUp(); 

      // and remove the active class from the .leader and content div 
      $(descriptionDiv).removeClass("active"); 
      $(this).removeClass('active'); 
     } 
     else { 
      // Remove "active" from all .leader divs 
      $(".leader").removeClass("active"); 

      // Add "active" class to the one just clicked 
      $(this).addClass("active"); 

      // Slide up the content div if it is already open while we are updating data, before re-opening, similar to the JSFiddle you posted 
      if ($(descriptionDiv).hasClass("active")) { 
       // Remove active class 
       $(descriptionDiv).removeClass("active"); 
       var $this = this; 
       $(descriptionDiv).slideUp("500", function() { 
        $($this).after(descriptionDiv); 
        // Update our data 
        UpdateData($this); 
        // Re-open it. 
        $(descriptionDiv).slideDown('slow').addClass('active'); 
       }); 
      } 
      else { 
       $(this).after(descriptionDiv); 
       // Update our data 
       UpdateData(this); 
       $(descriptionDiv).slideDown('slow').addClass('active'); 
      } 
     } 
    }); 

    function UpdateData(thisElement) { 
     var descriptionDiv = $(".leaderDescription"); 
     // Update our data 
     $(descriptionDiv).find('.leaderName').text($(thisElement).attr('data-name')); 
     $(descriptionDiv).find('.leaderTitle').text($(thisElement).attr('data-title')); 
     $(descriptionDiv).find('.leaderProfile').text($(thisElement).attr('data-profile')); 
    } 
</script> 

<style> 
    .leaderDescription { 
     transition: opacity .5s ease-in-out; 
     -moz-transition: opacity .5s ease-in-out; 
     -webkit-transition: opacity .5s ease-in-out; 

     opacity: 0; 
    } 

    .leaderDescription.active { 
     opacity: 1; 
    } 
</style> 

，我已经更新了这个答案，并张贴在Bootply： http://www.bootply.com/KsMdBmmOdD

用div替代UL/LI： http://www.bootply.com/MW55yyE6D7

制造充分响应：
http://www.bootply.com/Mi2q0SNMZs