Javascript 默认情况下关闭Div HTML代码 查询

现在，它正在保持部门的开放。我希望在默认情况下保持div关闭，用户应该单击加号打开它

编辑

---

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

将一些CSS添加到标记中：

.msg_body { display: none; }

---

在标记中添加一些CSS：

.msg_body { display: none; }

CSS:

更新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;
    });
});

工作小提琴：CSS:

更新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;
    });
});

---

工作小提琴：

您缺少一个分号，内部没有开关。我做了一些假设，根应该和它的子对象一起工作，而内部应该和它的子对象一起工作。我当然希望我没有把你想要的东西过于简单化

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

接下来是更简单的：并修复了先前版本中+/-文本的一个小问题

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

---

这里的示例：

您缺少分号，内部没有切换。我做了一些假设，根应该和它的子对象一起工作，而内部应该和它的子对象一起工作。我当然希望我没有把你想要的东西过于简单化

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

接下来是更简单的：并修复了先前版本中+/-文本的一个小问题

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

---

这里的示例：

不要忘记交换文本函数，以便+和-是正确的。编辑已选中。更新答案。不要忘记交换文本函数，以便+和-正确。编辑已检查。更新的答案。注意：这可能会有点紧，但如果我的假设正确的话，应该可以让你开始了。当你编写$.msg\u head、.msg\u headRoot.clickfunction时{您在哪里处理来切换根div？@PankajGarg两者都在同一个位置处理-它工作是因为选择器查找.msg_body类的下一个实例-根和内部都有下一个实例，它们不是同一个实例-请继续阅读。下一步：@PankajGarg-我知道您有答案，但对于其他实例呃，最后一个编辑/示例应该很好。注意：这可能会更紧凑一些，但如果我的假设是正确的，应该可以让您开始。当您编写$.msg\u head、.msg\u headRoot.clickfunction时{您在哪里处理来切换根div？@PankajGarg两者都在同一个位置处理-它工作是因为选择器查找.msg_body类的下一个实例-根和内部都有下一个实例，它们不是同一个实例-请继续阅读。下一步：@PankajGarg-我知道您有答案，但对于其他实例呃，最后一次编辑/示例应该很好。