縮略圖網格可擴展數據屬性

Question

好的，所以我在這里使用了各種各樣的插件來實現這一目標。 我已經與客戶核對了此頁面幾個小時。 他說他不希望我使用插件。 他引用了jQuery Animate，但是我對編寫自己的代碼真是個菜鳥，我不確定從哪里開始。 我提供了我需要執行的操作的圖像，但看起來很不錯，但是我需要一些幫助來找到解決方案。 感謝您的所有幫助和時間！）

我需要補充說明的是，該描述將始終在領導者縮略圖下方直接展開。 我也希望它對移動用戶也毫無影響。 如果可能的話？

    <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"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
                <li class="col-sm-2 col-xs-4 leader" data-name="ray" data-title="dunce" data-profile="dunce profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
                <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
                <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
                <li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"><a href="#"><img class="image-responsive" src="images/leader.jpg" alt="" /></a></li>
            </div>
            <div class="col-sm-10 col-sm-offset-1">
                <li id="1" class="leaderDescription"><div class="leaderName">NAME</div><div class="leaderTitle">TITLE</div><div class="leaderProfile">Description for row 1 cell 1</div></li>
            </div>
        </ul>
    </div>
    <script>
            $('.leader').click(function(){
$(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();
});
</script>

好的，所以我現在很想問這個問題。 我需要知道我該怎么做才能使它更接近上面的圖像。 我有第一行，並且要正確加載數據，如果已經打開了幻燈片，則無法將幻燈片向上滑動，然后向下滑動單擊的新幻燈片。 我還需要它來打開領導者照片下面的信息，就像我添加的照片一樣。 請讓我知道我離這有多遠？

Answer 1

我可能會這樣處理，以使容器在點擊時展開而不是懸停，以便為移動設備設置一致的行為。

為所有可擴展容器提供相同的類名（例如： employeeDetails ）。

也給所有照片拼貼一個類名（例如： employeeThumb ）。 然后為您的照片拼貼設置點擊事件：

$(".employeeThumb"_.on("click touchstart", function() {
  $(".employeeThumb").slideUp(105);   //closes any open expanded items
  $(this).find('.hover-dropdown').first().stop(true, true).slideDown(150);
}

您可以修改上面的內容，以便它檢測當前是否已打開，然后將其關閉。