大佬教程收集整理的这篇文章主要介绍了jQuery – slideDown和push图标，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我不能用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; }
<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(); }); });
以上是大佬教程为你收集整理的jQuery – slideDown和push图标全部内容，希望文章能够帮你解决jQuery – slideDown和push图标所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。