Question

HTML代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .msg_body
        {
            display: none;
        }
    </style>
    <script language="javascript" src="Scripts/jquery-1.4.1.min.js" type="text/javascript">

    </script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(".msg_head").click(function () {
                $(this).next(".msg_body").slideToggle();
            })

            $(".msg_headRoot").click(function () {
                $(this).next(".msg_bodyRoot").slideToggle();
            })

        .toggle(function () {
            $(this).children("span").text("[+]");
        }, function () {
            $(this).children("span").text("[-]");
        });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="msg_headRoot" style="cursor: pointer;">
        <p class="msg_headRoot" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
            <span>[+]&nbsp;</span>Root
        </p>
        <div class="msg_bodyRoot">
            <div class="msg_head" style="cursor: pointer;">
                <p class="msg_head" style="margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold;">
                    <span>[+]&nbsp;</span>Hello
                </p>
                <div class="msg_body">
                    Div text
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

查询

现在它正在维持div开放。我想默认关闭div，用户应点击加号打开它。

修改

忘了提到根div。我实际上有一个嵌套的div。我的意思是点击外部潜水的加号应该打开内部div

Answer 1

CSS：

.msg_body, .msg_bodyRoot {display: none;}

更新了JS：

$(document).ready(function() {
    var toggler = function(elem) {
        elem.slideToggle(500, function() {
            if (elem.is(':visible')) {
                elem.parent().find("p:first > span").text("[-]");
            } else {
                elem.parent().find("p:first > span").text("[+]");
            }
        });
    };
    $('div.msg_headRoot').click(function(e) {
        toggler($(this).children(".msg_bodyRoot"));
        e.preventDefault();
        return false;
    });
    $("div.msg_head").click(function(e) {
        toggler($(this).children(".msg_body"));
        e.preventDefault();
        return false;
    });
});

工作小提琴：http://jsfiddle.net/N9E9b/2/

Answer 2

在标记中添加一些CSS：

.msg_body { display: none; }

Answer 3

您缺少分号，内部没有切换。我做了一些假设，我认为根应该与孩子一起工作，内心与孩子一起工作。我当然希望我没有过分简化你想要的东西。

编辑：删除了没有错误的坏代码

只是为了跟进更简单:(并修复先前版本中+/-文本的小问题）

$(document).ready(function() {
    $(".msg_head,.msg_headRoot").click(function() {
        $(this).next(".msg_body").slideToggle();
        var clickp = $(this).children("span:contains('+')");
        var clickm = $(this).children("span:contains('-')");
        clickp.text("[-]");
        clickm.text("[+]");
    });
});


<div>
    <p class="msg_headRoot"><span>[-]&nbsp;</span>Root</p>
    <div class="msg_body">
        <p class="msg_head"><span>[+]&nbsp;</span>Hello</p>
        <div class="msg_body">Div text</div> 
    </div>
</div>

.msg_headRoot,.msg_head{margin: 3px; line-height: 20px; font-size: 16px; font-weight: bold; cursor:pointer;}
.msg_body div.msg_body{display:none;}

此处示例：http://jsfiddle.net/ykRaY/3/

默认情况下关闭Div

HTML代码

查询

修改

3 个答案: