点击隐藏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/

Answer 2

用以下代码替换您的jquery代码

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

Answer 3

尝试使用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 data-attribute来更改DOM结构。

DEMO

Answer 4

您需要为这些元素添加一个公共类，在打开所需元素之前将它们全部关闭。 您还可以在按钮上放置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');
});

示例小提琴

Answer 5

你的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");

});
});

演示