Question

我的网站上使用了以下代码：

$(function(){
$("#lifestyledropdown").click(function(event) {event.preventDefault();
            $("#lifestyleimages").slideToggle();
            });

$("#camarguedropdown").click(function(event) {event.preventDefault();
            $("#camargueimages").slideToggle();
            });
});

代码基本上表示当点击#lifestyledropdown时，向下滑动或向上滑动div #lifestyleimages等等......

我将使用完全相同的模式向网站添加越来越多的位...即按钮的＃'name'+'dropdown'然后＃'name' +'images 表示包含与该按钮位置相关的图像的div。

如果你的网站可能更有意义.. jb-design.me/marchupdate2 /

有没有办法缩短所有这些代码，以便检测“下拉按钮”名称和'images div'名称的相似之处？所以我不需要继续在下面添加新的？

如果那是不可能的，我的代码至少可以以某种方式缩短吗？或者这是最简单的解决方案

谢谢！

每个新项目框的HTML，

<div class="projectcontent">
<div class="projectimg"><img src="images/imagemain.jpg" alt="project" />

<div id="gallerybutton">
<a href="#" id="lifestyledropdown"><img src="images/gallerycollapsewhite.png" alt="project" class="gallerycollapse"/>
<img src="images/gallerycollapseblack.png" alt="project" class="gallerycollapseB"/></a>
</div>

<div class="projecttext" style="color:#FFF;text-align:left;">
<img src="images/breakshortwhite.jpg" />
<br />
<br />
<p2>PROJECT NAME<br />
<br />
ESTOTAS AUT ALICIENI QUIBUS EXPEROR ESTIAT ESTO VOLORPORRUM EARIORIT EUM EUM ATE CUS MO ET ATEM. TAE RE VELENDI GNIATUR, UTATE ET PORUM HARIBER AERORATISI BLACCUP TATIBEA TIOREPE LLIQUAE PELENIH ILIBEA SAPITAM EUM MEUN.<p2>
<br />
<br />
<img src="images/breakshortwhite.jpg" /><br /><br />
<p3>March 2012<br />
Print design, brochure design, bespoke graphic design</p3>
</div>
</div>
</div>

<div class="expandablebox" id="lifestyleimages" style="display:none;">
<div class="projectimg"><img src="images/image-slider.jpg" alt="project" />
</div>
    </div>

#Gallerybutton是为每个新项目重命名ID的按钮。即#lifestyledropdown
#exapandablebox是为每个新项目重命名ID的按钮。即#lifestyleimages *

slidetoggle简化代码？

0 个答案: