Javascript 嵌套div中的jQuery.closest（）

我将用一些数据创建一个可折叠的嵌套面板。但我没能把它弄垮。我使用的是

jquery1.11.1

bootstrap3.3.7

。我插入了几乎所有的代码，以使其更易于理解。我猜这是由于

.nestest（）函数在嵌套的
div
中找不到对象。但我不确定发生了什么。
city
面板可以很好地折叠，但是
region
面板失败。我从浏览器控制台也没有问题。我的javascript：


$（文档）.ready（函数（）{
$（文档）.on（'单击'，'面板标题span.clickable'，函数（e）{
var$this=$（this）；
if（！$this.hasClass（'panel-collapsed'））{
$this.closest（'.panel default'）.children（'.panel body'）.slideUp（）；
$this.addClass（'panel-collapsed'）；
$this.find（'em'）.removeClass（'fa-toggle-up'）.addClass（'fa-toggle-down'）；
}否则{
$this.closest（'.panel default'）.children（'.panel body'）.slideDown（）；
$this.removeClass（'panel-collapsed'）；
$this.find（'em'）.removeClass（'fa-toggle-down'）.addClass（'fa-toggle-up'）；
}
});
})

.小组{
边框：0；}
.面板容器{
填充顶部：20px；}
.面板标题.fa向上切换，.面板标题.fa向下切换{
字体大小：17px；}
.panel主>.panel标题{
背景色：#30a5ff；
颜色：#fff；
边框：无；}
.panel primary.panel设置：悬停，.panel primary.panel切换：悬停，.panel成功。panel设置：悬停，.panel信息。panel设置：悬停，.panel信息。panel切换：悬停，.panel警告。panel设置：悬停，.panel警告。panel切换：悬停，.panel危险。panel设置：悬停，.面板危险。面板切换：悬停{
边界：无；
颜色：#fff；
背景色：rgba（255，255，255，0.4）；}
.小组标题{
字体大小：20px；
字体大小：300；
字母间距：0.025em；
高度：60px；
行高：38px；}
.面板默认值.面板标题{
背景：#fff；
边框底部：1px实心#e9ecf2；
颜色：#4444；}
.面板页脚{
背景：#fff；
边框顶部：1px实心#e9ecf2；}
.panel.border顶部、.panel.border右侧、.panel.border底部、.panel.border左侧{
边框颜色：#e9ecf2；}


城市
区域
smth
要确保内部
块正好位于
之后。它们都应该是同级，嵌套在
下
 问题在于内部面板的HTML结构。您没有将“panel body”元素包含在“panel”中

更改HTML如下，这将解决问题

<div class="row" id="firstCity">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                city
                <span class="pull-right clickable panel-toggle">
                    <em class="fa fa-toggle-up"></em>
                </span>
            </div>
            <div class="panel-body">

                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                region
                                <span class="pull-right clickable panel-toggle">
                                    <em class="fa fa-toggle-up"></em>
                                </span>
                            </div>
                            <div class="panel-body">
                                <h4>smth</h4>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


城市
区域
smth
该死。你是对的。这是否值得成为一个问题，还是我应该删除它？哦，实际上我不能，因为你已经有分数了。