当div已经打开时如何隐藏div？

Question

我想不出更好的标题,所以我会尽可能清楚地解释我的问题.我是JQuery的新手,所以这可能是一个非常简单的问题.

我有一些带有按钮的div.单击该按钮时,应弹出另一个div.我的问题是:如何在点击另一个按钮时使已经打开的div关闭？

我用一些示例代码做了一个小提琴:http://jsfiddle.net/zuvjx775/1/

这里的示例代码:

HTML:

<div class="wrapper">
    <div class="test">
        <input type='button' class='showDiv' id="1" value='click!' />    
    </div>
    <div class="show_1">

    </div>
</div>
<br>
<div class="wrapper">
    <div class="test">
        <input type='button' class='showDiv' id="2"value='click!' /> 
    </div>
    <div class="show_2">

    </div>
</div>

JQuery的:

$('.showDiv').on('click', function(){
    var id = $(this).attr('id');
    $('.show_'+id).show();
});

show_1例如,当我看到,然后点击div2中的按钮时,我想要show_2它出现,但是show_1要消失.

有人能指出我正确的方向吗？

Answer 1

你可以隐藏所有以"show"开头的div,然后再显示你想要的那个.例如:

$('.showDiv').on('click', function() {
  var id = $(this).attr('id');
  $("div[class^='show']").hide();//find div class starts with 'show' and hide them
  $('.show_' + id).show();
});

.test {
  border: 1px solid black;
  height: 100px;
  width: 450px;
  float: left;
}
.show_1 {
  width: 50px;
  height: 50px;
  background-color: yellow;
  float: left;
  display: none;
}
.show_2 {
  width: 50px;
  height: 50px;
  background-color: green;
  float: left;
  display: none;
}
.wrapper {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="test">
    <input type='button' class='showDiv' id="1" value='click!' />
  </div>
  <div class="show_1">

  </div>
</div>
<br>
<div class="wrapper">
  <div class="test">
    <input type='button' class='showDiv' id="2" value='click!' />
  </div>
  <div class="show_2">

  </div>
</div>