Jquery：当您单击并隐藏其他div时显示相关的div(Jquery: Show related div when you click and hide others)

Jquery：当您单击并隐藏其他div时显示相关的div(Jquery: Show related div when you click and hide others)

我有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>

I have 2 divs with different content. I want to show the related div when I click on the link. It's showing both divs at the moment and it was supposed to show only the related one.

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>

最满意答案

试试这个

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

更新小提琴

Try this

$('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