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，然后再显示所需的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>

Answer 2

文件的结构是否已修复？是这样......我想最简单的方法就是执行以下操作：

$('.showDiv').on('click', function(){
    var id = $(this).attr('id');
    if(id == 1){
      $('.show_1').show();
      $('.show_2').hide();
    }else{
      $('.show_2').show();
      $('.show_1').hide();
    }        
})

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

2 个答案: