Question

编辑：问题不是隐藏它们（正如我原先想到的那样），确实如此在隐藏的DIV上使用函数toggle（），所以我更改了标题问题希望它可以帮助有类似问题的人

使用toggle（）函数隐藏/显示DIV时遇到问题：

我正在使用的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
<style type="text/css">
div{width:200px;padding:5px;padding-left:30px;border:0 solid #000;border-left-width:1px;border-bottom-width:1px;font-weight:700}
p{color:grey}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#main span").click(function() {
        $("#" + $(this).parent().attr("id") + " div").toggle("fast");
    });

    $("#main div").hide();

});
</script>
</head>
<body>
<div id="main">
    <span>hider</span>
    <div id="main-child1"><p>content-child1</p></div>
    <div id="main-child2">
        <span>hider</span>
        <div id="ultra-child"><p>content-ultrachild</p></div>
    </div>
    <div id="main-child3"><p>content-child3</p></div>
    <div id="main-child4">
        <span>hider</span>
        <div id="child-child4"><p>content-c4</p></div>

        <div id="main-child5">
            <span>hider</span>
            <div id="child-c5"><p>content-chl5</p></div>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

$(function() {
    $('#main>div').fadeOut('fast');
});

$(function() {})会在页面准备就绪后立即启动脚本。
$('#main>div')定位#main。
淡出淡出所选的Div。

Answer 2

为第一个元素添加触发器：

$("#main span:first").trigger("click");

http://jsfiddle.net/EppSm/4/

Answer 3

你走了：

$("#main > div").hide();

Answer 4

我认为您的问题是，当您点击hider时，您正在选择（并因此显示）所有div。使用子选择器仅打开所需的级别：

$("#" + $(this).parent().attr("id") + " > div").toggle("fast");

然而，更好的解决方案是切换hider

的兄弟姐妹

$(this).siblings("div").toggle("fast");

隐藏元素的代码运行正常。

演示：http://jsfiddle.net/EppSm/6

Answer 5

使用jQuery .find()：

$("#main").find("div").hide();

Answer 6

如果您的意思是对隐藏DIV中的元素使用toggle()，这是一个已知错误。根据{{3}}，我无法确定（使用jquery 1.7.2）。

使用JQuery在隐藏的DIV上使用toggle（）的问题

6 个答案: