Javascript Jquery：单击并隐藏其他div时显示相关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

这是一个




这是两个

使脚本理解其关系。将其更改为：

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

---

小提琴：使脚本理解其关系。将其更改为：

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

小提琴：试试这个

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

试试这个

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

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

请尝试以下操作：

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

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

请尝试以下方法：

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

---

是否可以隐藏任何可见的div？@brunodd是的，但您的问题不清楚。这是可伸缩的。也适用于100个div！我编辑了这个问题，现在应该更有意义了。你的代码就快到了。“我怎么能隐藏其他div？”brunodd更新了答案@PraveenKumar Cool:）可以隐藏任何可见的div吗？@brunodd是的，但你的问题不清楚。这是可伸缩的。也适用于100个div！我编辑了这个问题，现在应该更有意义了。你的代码就快到了。“我怎么能隐藏其他div？”brunodd更新了答案@PraveenKumar Cool:）我知道我应该发布一个新问题，但它不允许我。如果我使用select2.js插件呢？我想在单击“选择”按钮内部时显示div，在单击“外部”时将其隐藏。看这把小提琴：太棒了！我刚改为focusin（），但它正在工作。多谢各位@brunodd很高兴帮助你知道我应该发布一个新问题，但这不允许我。如果我使用select2.js插件呢？我想在单击“选择”按钮内部时显示div，在单击“外部”时将其隐藏。看这把小提琴：太棒了！我刚改为focusin（），但它正在工作。多谢各位@很高兴能帮助你