javascript - jQuery单独列表上下滑动

Question

我对 jQuery 并没有真正的经验，但我找不到这个问题的答案。我真正想做的是，当人们点击带有类机器下拉菜单的 img 时，div 概述会滑动切换。我在此页面上有多个具有相同结构的列表，因此我需要它们单独工作。

<img class="machine-dropdown" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
    <div class="clear"></div>
    <div class="category-divider"></div>
    <div class="row">
        <div class="overview">
            <div class="col-lg-3 col-md-6 col-sm-6">
                <a href="machines">
                    <img class="actueel-img" src="" />
                </a>
                <a href="">
                    <span class="machine-overzicht-title"></span>
                </a>
            </div>
        </div>
    </div>

我尝试了很多 jquery 已有的方法。 .closest .first .find 但当我单击它时，它仍然会滑动所有列表。

感谢您的帮助!

Answer 1

你可以这样做:

将 HTML 更改为:

<img class="machine-dropdown" data-target="#overview-1" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
    <div class="clear"></div>
    <div class="category-divider"></div>
    <div class="row">
        <div class="overview" id="overview-1">
            <div class="col-lg-3 col-md-6 col-sm-6">
                <a href="machines">
                    <img class="actueel-img" src="" />
                </a>
                <a href="">
                    <span class="machine-overzicht-title"></span>
                </a>
            </div>
        </div>
    </div>

请注意，我已将 data-target="#overview-1" 添加到 machine-dropdown 图像和 id="overview-1" 到概述 div。

现在使用以下 javascript/jquery:

$(function(){
    $(".machine-dropdown").each(function(){
        $(this).click(function(){
            var target = $(this).data("target");
            $(target).slideToggle();
        });
    });
});