如何隐藏和显示多个div？

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

更新：

  

其实我想要的是当我点击第一次点击这里然后点击第二个然后第一个的div应该隐藏而第二个要打开

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

<强> Demo for updated answer

Answer 2

http://jsfiddle.net/evGd6/90/

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

Answer 3

使用$(this).next()引用您要显示/隐藏的下一个元素。

在代码段中查看我的答案。

＆＃13;

＆＃13;

$(document).on('click', '.click', function() {
  $(this).next().slideToggle();
});

＆＃13;

.click {
  border: 1px solid black;
  background-color: whitesmoke;
  padding: 20px;
  display: inline-block;
}
.showup {
  display: none;
  padding-left: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="click">Click Me</div>
<div class="showup">You clicked the first div</div>
<br>
<div class="click">Click Me</div>
<div class="showup">You clicked the Second div</div>
<br>
<div class="click">Click Me</div>
<div class="showup">You clicked the Third div</div>

＆＃13;

＆＃13;

＆＃13;