Question

基本上我在页面上显示了一系列项目。

每个项目都包含一个容器div，一个里面的图像div，然后是一个div内的按钮。使用另一个div设置为'Display：none'。当用户点击'内部'按钮时，每次点击时div设置为'display：none'slideToggles ...

我将在页面上有很多这些，我现在不得不为按钮的新“id”和滑动div添加新的代码行...有没有办法检测滑动div是一个孩子到图像div？

我目前使用的代码是：

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

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

每个都遵循相同的模式：

项目1：
div id ='name-A'dropdown（用于激活幻灯片切换的按钮的id）
div id ='name-A'images（向下滑动的div的id）

项目2：
div id ='name-B'dropdown（用于激活幻灯片切换的按钮的id）
div id ='name-B'images（向下滑动的div的id）

每个项目都有相同的布局，只是不同的内容所以我假设我可以使用代码来检测'名称部分'？

项目的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" />

<p2>PROJECT NAME<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>
</div>

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

Answer 1

您可以使用“以$=选择器结尾”获取所有dropdown ID，然后使用next() slideToggle()后续div：

$('div[id$="dropdown"]').click(function(ev){
    ev.preventDefault();
    $(this).next().slideToggle();
});

See demo 1

如果images div不一定直接跟随dropdown div，则可以使用一些正则表达式来完成任务：

$('div[id$="dropdown"]').click(function(ev){
    ev.preventDefault();
    $toggleDiv = $('#' + this.id.replace(/^(.*?)dropdown$/, '$1images'));
    $toggleDiv.slideToggle();
});

检测子ID并在其上调用幻灯片切换

1 个答案:

See demo 1

See demo 2