jQuery - slideDown 和推送图标

Question

我有一个带有一行图标的首页。它们的大小是相对于视口(viewport)的。当我点击一些图标时，我想用一些内容在图标(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();
   });
});