特别提示：

Question

我想在点击时显示和隐藏一些div，我设法实现了它的一部分（当我点击相应的按钮时，它显示div并隐藏它们）。

但是，当我点击其他按钮时，我不知道如何关闭所有已打开的div。例如，如果我点击＆＃34;添加＆＃34;按钮，它会打开相应的div，当我点击＆＃34;编辑＆＃34;我想打开＆＃34;编辑＆＃34; div和close＆＃34;添加＆＃34;格。

我的相关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/

Answer 2

尝试使用attribute starts with selector抓住类似的元素，抓住它后隐藏它然后执行正常的过程，

$("#add").click(function(){
 $('div[id^=test]').hide();
 $("#test1").slideToggle("fast");
});

$("#edit").click(function(){
 $('div[id^=test]').hide();
 $("#test2").slideToggle("fast");
});

$("#view").click(function(){
 $('div[id^=test]').hide();
 $("#test3").slideToggle("fast");
});

DEMO

更简单，

$('[type=button]:not(#delete)').click(function(){
 $('div[id^=test]').hide().eq($(this).index()).slideToggle("fast");
});

特别提示：

此代码不希望我们通过添加/ hardcoding 数据属性来更改DOM结构。

DEMO

Answer 3

您需要为这些元素添加一个公共类，在打开所需元素之前将它们全部关闭。您还可以在按钮上添加data属性以干掉代码。试试这个：

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

$('#controls input').click(function() {
    $('.content').slideUp('fast');
    $($(this).data('rel')).slideDown('fast');
});

Example fiddle

Answer 4

你的jquery

$(document).ready(function(){
$("#add").click(function(){
    $("div").not("#test1,#controls").hide();
$("#test1").slideToggle("fast");

});
$("#edit").click(function(){
    $("div").not("#test2,#controls").hide();
$("#test2").slideToggle("fast");

});
$("#view").click(function(){
  $("div").not("#test3,#controls").hide();
$("#test3").slideToggle("fast");

});
});

Demo

Answer 5

replace your jquery code with the following code

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

点击隐藏div

5 个答案:

DEMO

特别提示：

DEMO