Jquery - 单击链接时显示当前div并隐藏其他div [英] Jquery - Show current div when click a link and hide others

问题描述

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

When I click on Show/hide link it shows both divs and I want it to show only its related div. How can I do that? I don't want to use ID's for each div.

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();
    });
});

推荐答案

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

Into the click function, change your code to this:

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

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

这篇关于Jquery - 单击链接时显示当前div并隐藏其他div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！