Jquery：当您单击并隐藏其他div时显示相关的div

Question

我有2个不同内容的div。我想点击链接时显示相关的div。它现在显示两个div，它应该只显示相关的div。

jsfiddle

$('div.tip-2').hide(); 

$('.showDiv').on('click', function() {
    $('div.tip-2').fadeIn(200);
    event.stopPropagation();
});

$(document).click(function(e) {
    if (!$(e.target).is('div.tip-2 *')) {
        $("div.tip-2").fadeOut(200);
    }
});

HTML

<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is one!</p>
</div>

<br/><br/>
<a class="showDiv" href="#">Show div</a>
<div class="tip-2">
<p>This is two!</p>
</div>

Answer 1

让脚本了解它的关系。将其更改为：

$('div.tip-2').hide(); 

$('.showDiv').on('click', function() {
    $this = $(this);
    $('div.tip-2').fadeOut(200, function () {
        $this.next('div.tip-2').fadeIn(200);
    });
    event.stopPropagation();
});

$(document).click(function(e) {
    if (!$(e.target).is('div.tip-2 *')) {
        $("div.tip-2").fadeOut(200);
    }
});

小提琴：http://jsfiddle.net/praveenscience/g25hsdw6/4/

Answer 2

试试这个

$('div.tip-2').hide(); 

$('.showDiv').on('click', function() {
    $("div.tip-2").hide();
    $(this).next().fadeIn(200);
    event.stopPropagation();
});

$(document).click(function(e) {
    if (!$(e.target).is('div.tip-2 *')) {
        $("div.tip-2").fadeOut(200);
    }
});

<强> updated Fiddle

Answer 3

请试试这个：

    $('div.tip-2').hide(); 

    $('.showDiv').on('click', function() {
       $("div.tip-2").hide();
       $(this).next('.tip-2').fadeIn(200);
       event.stopPropagation();
    });

    $(document).click(function(e) {
        if (!$(e.target).is('div.tip-2 *')) {
            $("div.tip-2").fadeOut(200);
        }
    });

http://jsfiddle.net/Rino_Raj/g25hsdw6/5/