我正在使用此代码进行切换。如何使用此代码创建多个切换

Question

$(document).ready(function () {
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').toggle(function () {
        $(".slidingDiv").slideDown(
            function () {
                $("#plus").text("Hide responses")
            }
        );
    }, function () {
        $(".slidingDiv").slideUp(
            function () {
                $("#plus").text("Show responses")
            }
        );
    });
});

<a href="#">Write a responses</a>
<a href="#" id="plus" class="show_hide">Show responses</a> 
<div class="slidingDiv">Test Here </div>

<a href="#">Write a responses</a>
<a href="#" id="plus" class="show_hide">Show responses</a> 
<div class="slidingDiv">Test Here </div>

Answer 1

由于id必须是唯一的，因此您需要使用class：

<a href="#">Write a responses</a>
<a href="#" class="plus show_hide">Show responses</a> 
<div class="slidingDiv">Test Here</div>

<a href="#">Write a responses</a>
<a href="#" class="plus show_hide">Show responses</a> 
<div class="slidingDiv">Test Here</div>

然后你可以这样做：

$(document).ready(function () {
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').toggle(function () {
        $(this).next().slideDown(

        function () {
            $(this).prev().text("Hide responses")
        });
    }, function () {
        $(this).next().slideUp(

        function () {
            $(this).prev().text("Show responses")
        });
    });
});

<强> Fiddle Demo