Jquery - 单击链接时显示当前div并隐藏其他div

Question

当我点击显示/隐藏链接时，它会显示两个div，我希望它只显示其相关的div。我怎样才能做到这一点？我不想为每个div使用ID。

jsfiddle

<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>

    <div class="slidingDiv">
    First div.
    </div>
</div>

<br/>

<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>

    <div class="slidingDiv">
    Second div.
    </div>
</div>

和

$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
});

Answer 1

进入点击功能，将代码更改为：

$(".slidingDiv").slideUp();    
$(this).next().slideToggle();

https://jsfiddle.net/pzc8vy9b/6/

Answer 2

通过更改

来使用next()

$(".slidingDiv").slideToggle();

到

$(this).next(".slidingDiv").slideToggle();

＆＃13;

＆＃13;

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();
    
    $('.show_hide').click(function(){
    $(this).next(".slidingDiv").slideToggle();
    });

});

＆＃13;

.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}

.show_hide {
display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>
    
    <div class="slidingDiv">
    First div.
    </div>
</div>

<br/>

<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>
    
    <div class="slidingDiv">
    Second div.
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需使用next()。

https://jsfiddle.net/pzc8vy9b/4/

<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>

    <div class="slidingDiv">
    First div.
    </div>
</div>

<br/>

<div class="main-box">
    <a href="#" class="show_hide">Show/hide</a>

    <div class="slidingDiv">
    Second div.
    </div>
</div>

$(document).ready(function(){
    $('.show_hide').click(function(){
        $(this).next().slideToggle();
    });
});

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
    display: none;
}

Answer 4

试试这个

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
    $(this).next(".slidingDiv").slideToggle();
    });

});