当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> 

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