Question

我不确定我需要什么，所以下面的解释可能不太清楚 - 如果不是，请告诉我。

我想slideToggle一个特定的点击div，我当前拥有的代码当然是滑动切换所有div的实例.open-statement，但我只想切换该类出现在父div .agenda-content中的一个实例。最终会在页面上出现.open-statement的大量实例，但只有其中一个应该切换（当前点击的div中的那个）。

HTML

        <div class="agenda-content">
            <div class="row stance-row">
                <div class="col-xs-3 no_padding">
                    1
                </div>
                <div class="col-xs-2">
                    Obamacare
                    <button class="btn btn-orange">Remove Stance</button>
                </div>
                <div class="col-xs-2">
                    Add jQuery UI here
                </div>
                <div class="col-xs-2">
                    34
                </div>
                <div class="col-xs-2 no_padding">
                    Wayne Rooney
                </div>
            </div>
            <div class="row no-row-style">
                <div class="open-statement">
                    <div class="col-xs-4 col-xs-offset-1">
                        <div class="your-statement">
                            <textarea placeholder="Please write your statement"></textarea>
                            <button class="btn btn-orange">Edit</button>
                        </div>
                    </div>
                    <div class="col-xs-7 no_padding">
                        <div class="statement-actions">
                            <button class="btn btn-alert">Deactivate</button>
                            <button class="btn btn-lt-secondary">View Debates</button>
                            <button class="btn btn-orange">Unsupport</button>   
                        </div>
                    </div>
                </div>
            </div>
            <div class="row stance-row">
                <div class="col-xs-3 no_padding">
                    2
                </div>
                <div class="col-xs-2">
                    Raise Minimum Wage
                    <button class="btn btn-orange">Take a Stance</button>
                </div>
                <div class="col-xs-2">
                    Add jQuery UI here
                </div>
                <div class="col-xs-2">
                    34
                </div>
                <div class="col-xs-2 no_padding">
                    Stephen King
                </div>
            </div>
            <div class="row no-row-style">
                <div class="open-statement">
                    <div class="col-xs-4 col-xs-offset-1">
                        <div class="your-statement">
                            <textarea placeholder="Please write your statement"></textarea>
                            <button class="btn btn-orange">Edit</button>
                        </div>
                    </div>
                    <div class="col-xs-7 no_padding">
                        <div class="statement-actions">
                            <button class="btn btn-alert">Deactivate</button>
                            <button class="btn btn-lt-secondary">View Debates</button>
                            <button class="btn btn-orange">Unsupport</button>   
                        </div>
                    </div>
                </div>
            </div>
        </div>

jQuery

$(document).ready(function () {
$(".stance-row").click(function () {
    $(".agenda-content").find(".open-statement").slideToggle();
});
});

Answer 1

.agenda-content是所有.open-statement的父级。你需要更具体。使用.next和.find()：

$(document).ready(function () {
    $(".stance-row").click(function () {
        $(this).next().find(".open-statement").slideToggle();
    });
});

Answer 2

您几乎就在那里，您只需更改代码即可获得相应的下一项。

$(document).ready(function () {
 $(".stance-row").click(function () {
   $(this).next("div.row").find(".open-statement").slideToggle();
 });
});

DEMO：http://jsfiddle.net/6GMj7/

干杯，阿肖克

Answer 3

使用this：

$(this).closest(".agenda-content").find(".open-statement").slideToggle();

只切换一个类的实例

3 个答案: