javascript - 如何隐藏和显示多个 div(s)？

Question

我的代码中有多个 div，但是当我单击任何一个 div 时，所有隐藏的分区都会显示，但我希望在单击特定的 div 时仅显示该幻灯片的隐藏分区并在外部单击它隐藏了

代码的链接是 http://jsfiddle.net/evGd6/89/

$(document).ready(function(){
    $('.click').click(function(event){
        event.stopPropagation();
         $(".showup").slideToggle("fast");
    });
    $(".showup").on("click", function (event) {
        event.stopPropagation();
    });
});

$(document).on("click", function () {
    $(".showup").hide();
});

body{margin:50px;}

.showup{width:100px;height:100px; background:red; display:none;}
.click{cursor:pointer;}

<div class="click">click me</div>
<div class="showup">something I want to show</div>
<div class="click">click me</div>
<div class="showup">something I want to show</div>
<div class="click">click me</div>
<div class="showup">something I want to show</div>

Answer 1

您只需定位被点击元素的下一个元素。为此，您可以使用 .next() 以及单击的元素上下文 this。像这样:

$('.click').click(function(event){
    event.stopPropagation();
    $(this).next().slideToggle("fast");
});

Working Demo

更新:

Actually I want that when I click on the first click here and then click on the second one then the div of the First one should hide and the second one to open

$('.click').click(function(event){
    event.stopPropagation();
    $(".showup").not($(this).next()).slideUp("fast");
    $(this).next().slideToggle("fast");
});

Demo for updated answer