jQuery - slideDown和push图标

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