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

I'm using this code for toggle. How to create multiple toggle using this code

本文关键字：代码 何使用 创建      更新时间：2023-09-26
$(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>

由于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")
        });
    });
});
<<p> 小提琴演示/strong>
相关文章：