Jquery:单击并隐藏他人时显示相关的div

Question

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

小提琴

$('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() {
    $("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);
    }
});

更新Fiddle

Answer 2

让脚本理解它的关系。改为：

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

Raj/g25hsdw6/5/