如果单击另一个，则使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