javascript - 点击隐藏div

Question

我想在点击时显示和隐藏一些 div 并且我设法实现了其中的一部分(它显示 div 并在我点击相应的按钮时隐藏它们)。

但是，我不知道如何在点击其他按钮时关闭所有已经打开的div。例如，如果我单击“添加”按钮并打开相应的 div，当我单击“编辑”时，我想打开“编辑”div 并关闭“添加”div。

我的相关 HTML

<div id="controls">
    <input type="button" class="addBtn" value="Add" id="add"/>
    <input type="button" class="editBtn" value="Edit"  id="edit"/>
    <input type="button" class="viewBtn" value="View" id="view"/>
    <input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>

我的JS:

$(document).ready(function(){
    $("#add").click(function(){
        $("#test1").slideToggle("fast");
    });
    $("#edit").click(function(){
        $("#test2").slideToggle("fast");
    });
    $("#view").click(function(){
        $("#test3").slideToggle("fast");
    });
});

感谢您的建议和提示。

Answer 1

我想这是你能做的最简单的事情..希望这对你有帮助..

<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit"  id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>

http://jsfiddle.net/alaskaz1864/VtLzB/1/