jQuery个人列表上下滑动

Question

我对jQuery没有真正的经验，但是我找不到答案。 我真正想做的是，当人们单击带有div概述执行slideToggle的class machine-dropdown的img时。 在此页面上，我有多个具有相同结构的列表，因此我需要它们单独工作。

<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"到了overview div。

现在使用以下javascript / jquery：

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

Answer 2

在代码中使用this属性。

$('.machine-dropdown').click(function(){
$(this).next().next().next().find('.overview').slideToggle();
});

我认为它将解决您的问题。