jQuery-向下滑动和推送图标

我有一个带有一行图标的frontpage。它们的大小相对于视口。当我点击一些图标时，我想在图标行（iTunes风格）下用一些内容展开一个div。我使用jQuery并尝试了slideDown，将内容附加到icon div和不附加到icon div，但它没有考虑行的其余部分

我不能用div分隔每一行，因为一行上的图标数量不一致

我尝试过这个库，但由于糟糕的文档，我没有成功地使它工作，有什么建议：

一些jQuery:

$(document).ready(function(e){

   $('#1').on('click',function(){

      $('.dropdownwrap').slideToggle();

   });

<div id="1" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> 
<a href="#">Icon-Label</a> </div>
<div class="dropdownwrap"></div>
<div id="2" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="3" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="5" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="6" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="7" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="8" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> 
<a href="#">Icon-Label</a> </div>
<div id="9" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="10" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="11" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="12" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="13" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>

.app {
    float: left;
    width: 14.28%;
    padding: 1%;
    font-weight: 300;
    font-size: 14px;
    white-space:nowrap;
    position:relative;
    text-align:center;
}
.app a {
    display:block;
}
.app img {
    max-width: 121px;
    width: 100%;
}
.dropdownwrap{
    height:auto;
    float:left;
    margin:0px 0px 20px 0px;
    background-color:#434343;
    display:none;
    padding:20px;
}

HTML:

$(document).ready(function(e){

   $('#1').on('click',function(){

      $('.dropdownwrap').slideToggle();

   });

<div id="1" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> 
<a href="#">Icon-Label</a> </div>
<div class="dropdownwrap"></div>
<div id="2" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="3" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="5" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="6" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="7" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="8" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> 
<a href="#">Icon-Label</a> </div>
<div id="9" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="10" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="11" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="12" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>
<div id="13" class="app"><a href="#"><img src="http://www.lorempixel.com/121/121" alt=""/></a> <a href="#">Icon-Label</a> </div>

.app {
    float: left;
    width: 14.28%;
    padding: 1%;
    font-weight: 300;
    font-size: 14px;
    white-space:nowrap;
    position:relative;
    text-align:center;
}
.app a {
    display:block;
}
.app img {
    max-width: 121px;
    width: 100%;
}
.dropdownwrap{
    height:auto;
    float:left;
    margin:0px 0px 20px 0px;
    background-color:#434343;
    display:none;
    padding:20px;
}

试试这个

---

我想了很久，终于找到了这个解决办法

JAVASCRIPT

 $('.app').on('click', function (evt) {
                evt.preventDefault();

                if ($(this).hasClass("active")) {
                    $(".app.active").removeClass("active");
                    $(".dropdownwrap").remove();
                    return false;
                }
                $(".app.active").removeClass("active");

                var clickedElement = $(this);
                clickedElement.addClass("active");
                var dropDownAppended = false;


                $(this).nextAll(".app").each(function () {
                    var offset = $(this).offset().top;
                    if (offset > (clickedElement.offset().top + 10)) {
                        $(".dropdownwrap").remove();
                        $(this).before('<div class="dropdownwrap">Clicked On ID: ' + clickedElement.attr("id") + '</div>');
                        $(".dropdownwrap").slideDown();
                        dropDownAppended = true;
                        return false;
                    }

                });

                if (!dropDownAppended) {
                    var itemsAfter = $(this).nextAll(".app").length;
                    console.log(itemsAfter);
                    if (itemsAfter) {
                        $(".dropdownwrap").remove();
                        $(this).nextAll(".app").last().after('<div class="dropdownwrap">Clicked On ID: ' + clickedElement.attr("id") + '</div>');
                        $(".dropdownwrap").slideDown();
                        dropDownAppended = true;
                        return false;
                    }
                    else {
                        $(".dropdownwrap").remove();
                        $(this).after('<div class="dropdownwrap">Clicked On ID: ' + clickedElement.attr("id") + '</div>');
                        $(".dropdownwrap").slideDown();
                        dropDownAppended = true;
                        return false;
                    }
                }




            });

$（'.app'）。在（'click'，函数（evt）上{
evt.preventDefault（）；
if（$（this）.hasClass（“活动”））{
$（.app.active”）.removeClass（“active”）；
$（“.dropdownwrap”）.remove（）；
返回false；
}
$（.app.active”）.removeClass（“active”）；
var clickedElement=$（此项）；
单击eElement.addClass（“活动”）；
var-dropdownsadded=false；
$（this）.nextAll（.app”）。每个（函数（）{
var offset=$（this）.offset（）.top；
如果（偏移量>（单击edelement.offset（）.top+10））{
$（“.dropdownwrap”）.remove（）；
$（this）.before（'Clicked On ID:'+clickedElement.attr（“ID”）+“”）；
$（“.dropdownwrap”）.slideDown（）；
dropdownAdded=true；
返回false；
}
});
如果（！DropDownAdded）{
var itemsAfter=$（this）.nextAll（“.app”）.length；
console.log（itemsAfter）；
if（itemsAfter）{
$（“.dropdownwrap”）.remove（）；
$（this）.nextAll（.app”）.last（）。after（'Clicked On ID:'+Clicked元素.attr（“ID”）+“”）；
$（“.dropdownwrap”）.slideDown（）；
dropdownAdded=true；
返回false；
}
否则{
$（“.dropdownwrap”）.remove（）；
$（this）.after（'Clicked On ID:'+Clicked元素.attr（“ID”）+“”）；
$（“.dropdownwrap”）.slideDown（）；
dropdownAdded=true；
返回false；
}
}
});

这将在任何屏幕大小的作品，但你需要检查，因为我没有测试太多。 当下拉菜单打开时，当有人调整浏览器的大小时，您还需要做一些事情

---

希望它对您有用。

您需要通过获取行宽和图标宽度来识别行中有多少图标。我为你准备了一把小提琴。我认为它满足了您的需求：

我做了一些CSS更新和一些标记更改，所以请确保您有一个良好的外观

jQuery代码如下所示：

//set the function as a variable of the window to be called later
window["iconSlider"] = {};

//setup basic parameters
iconSlider.config = {
    parentWidth: null,
    width: null,
    itemsPerRow: null,
    siblings: null,
    index: null,
    total: null,
    rows: null,
    position: null,
    container: $('<div class="dropdownwrap"></div>')
};

//init function to be called at $(document).ready();
iconSlider.init = function() {

   $('.app').on('click',function(){


    //get the row position
       var position = iconSlider.getRow($(this)),
           stopIndex = iconSlider.config.itemsPerRow * position,
           startIndex = stopIndex - iconSlider.config.itemsPerRow;

       var thisRow = iconSlider.config.siblings.slice(startIndex, stopIndex);
       iconSlider.openRow(thisRow);


   });

    //reset on resize
    $(window).resize(function() {
        iconSlider.reset();
    });
};

//getRow function - pass in the icon that was clicked
iconSlider.getRow = function (icon) {

    //set values to all our parameters
        iconSlider.config.parentWidth = icon.parents('.wrapper').width();
        iconSlider.config.width = icon.outerWidth();
        iconSlider.config.itemsPerRow = Math.floor(iconSlider.config.parentWidth / iconSlider.config.width);
        iconSlider.config.siblings = icon.parents('.wrapper').find('.app');
        iconSlider.config.index = icon.index() +1;
        iconSlider.config.total = iconSlider.config.siblings.length;
        iconSlider.config.rows = iconSlider.config.total / iconSlider.config.itemsPerRow;
        iconSlider.config.position = Math.ceil(iconSlider.config.index / iconSlider.config.total * iconSlider.config.rows);


    //return the row position
    return (iconSlider.config.position);
};

//open the row
iconSlider.openRow = function(row) {

    //reset
    iconSlider.reset();

    //when reset is complete, initiate the opening of the new row
    iconSlider.config.container.promise().done(function() {

        //make sure there is a row
        if (row.length > 1) {

            //for each item in the row, add a class 'expanded'
            for (i = 0; i < (row.length) ; ++i) {
                row.eq(i).addClass('expanded');
            }

            //append the container after the last item in the row
            row.eq(row.length -1).after(iconSlider.config.container)

            //slide the container open
            iconSlider.config.container.slideDown();
        }

    });

};


//general reset
iconSlider.reset = function(){
    $('.app.expanded').removeClass('expanded');
    iconSlider.config.container.slideUp(200);
    $(this).remove();
};

---

当我点击另一个按钮时，有什么简单的方法可以滑开“活动”下拉列表吗？这就像一个简单的解决方案。动画移除（）有什么好的替代方案吗？像一个幻灯片，然后删除@莫利克-Anand@simonkaspers1：ya，可以这样做，

$（“类”）.slideUp（函数（）{$（this.remove（）}）