jQuery - 向下滑动和推送图标

Question

我有一个带有一行图标的首页。它们的大小是相对于视口而言的。当我点击一些图标时，我想在图标行（iTunes 风格）下扩展一个 div，其中包含一些内容。我使用 jQuery 并尝试过 slideDown，无论是否将内容附加到 icon-div，但它没有考虑该行的其余部分。

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

我已经尝试过这个库，但是由于糟糕的文档我没有设法使它工作，任何建议： http://thomaspark.me/project/expandingalbums/

一些 jQuery：

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

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

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

   });

HTML：

<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>

CSS：

.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;
}

http://jsfiddle.net/Jxkv5/

Answer 1

试试这个

http://jsfiddle.net/Jxkv5/5/

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

js

$(document).ready(function(e){
   $('.app').on('click',function(){
       var $this = $(this);
       var id = $this.attr('id');
       if($this.hasClass('active'))
           return;
       $('.app').removeClass('active')
       $('.dropdownwrap').css('display','none'); 
       $this.addClass('active');       
       $('[for="'+ id +'"]').slideToggle();
   });
});

Answer 2

我想了很久，终于想到了这个解决方案。

CHECK DEMO ON JSFIDDLE

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;
                    }
                }




            });

这适用于任何屏幕尺寸，但您需要检查，因为我没有进行太多测试。 当有人在下拉菜单打开时调整浏览器大小时，您还需要做一些事情。

希望对你有用。

Answer 3

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

http://jsfiddle.net/qXR3X/

我还进行了一些 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();
};

在文档中这样调用：

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

   iconSlider.init();

});