javascript - 如果单击另一个元素，则使 jQuery 元素向上滑动

Question

好的，所以我正在寻找与我在此页面上找到的类似的功能:http://jsfiddle.net/B6TZS/

我几乎需要同样的东西。事实上，向下滑动直接位于被单击的元素下方。不同之处在于我需要从每个元素中的 data- 加载某些数据。我希望数据在 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