我有一个弹出窗口，在这个弹出窗口中我有一个可折叠的div。如果我将可折叠div的代码粘贴到jsfiddle中，它可以正常工作。它在我的页面上不起作用。为什么会这样？此外，可折叠div包含一个滑块。滑块按钮也不起作用。也许这是同样的问题。
这是我的HTML：
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8">
<!-- POST -->
{% for entry in entries %}
<div class="panel panel-default">
<div class="panel-body">
<div class="media media-clearfix-xs-min">
<div class="media-left">
<a href="lesson.html">
<span class="media-object icon-block bg-default"><i class="fa fa-github"></i></span>
</a>
</div>
<div class="media-body">
<h3 class="media-heading h4"><a href="" class="popup-link-1">{{ entry.title }}</a></h3>
<p class="small text-muted">
<!-- <i class="fa fa-clock-o fa-fw"></i> time since post -->
<div class="popup-box" id="popup-box-1">
<div class="close">X</div>
<body>
<div id="myCarousel" class="carousel slide"> <!-- slider -->
<div class="carousel-inner">
<div class="active item"> <!-- item 1 -->
<img src="http://placehold.it/940x120" alt="">
</div> <!-- end item -->
<div class="item"> <!-- item 2 -->
<img src="http://placehold.it/940x120" alt="">
</div> <!-- end item -->
<div class="item"> <!-- item 3 -->
<img src="http://placehold.it/940x120" alt="">
</div> <!-- end item -->
</div> <!-- end carousel inner -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div> <!-- end slider -->
</body>
<div class="top">
<h2>{{entry.title}}</h2>
</div>
<div class="bottom">
<p>{{ entry.body_html | safe }}</p>
</div>
<p>
<i class="fa fa-user fa-fw"></i> <a href="{{ url_for('public_user_page', userID=entry.userID) }}">{{entry.user_name}}</a>
<i class="fa fa-calendar fa-fw"></i> {{entry.date_posted}}
<p>
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Hello!!!
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
See All Entries That Cite This
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<body>
<div id="myCarousel" class="carousel slide"> <!-- slider -->
<div class="carousel-inner">
<div class="active item"> <!-- item 1 -->
<img src="http://placehold.it/940x120" alt="">
</div> <!-- end item -->
<div class="item"> <!-- item 2 -->
<img src="http://placehold.it/940x120" alt="">
</div> <!-- end item -->
<div class="item"> <!-- item 3 -->
<img src="http://placehold.it/940x120" alt="">
</div> <!-- end item -->
</div> <!-- end carousel inner -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div> <!-- end slider -->
</body>
</div>
</div>
</div>
</div>
<p>
<p>
<p>
{% if current_user.is_authenticated %}
<div class="container-fluid">
<div class="timeline row" data-toggle="isotope">
<div class="col-xs-12 col-md-12 col-lg-12 item">
<div class="timeline-block">
<div class="panel panel-default share clearfix-xs">
<div class="panel-heading panel-heading-gray title">
<textarea name="status" class="form-control share-text" rows="1" placeholder="Type Subject..."></textarea>
</div>
<div class="panel-body">
<textarea name="status" class="form-control share-text" rows="5" placeholder="Type Body..."></textarea>
</div>
<div class="panel-footer share-buttons">
<a href="#"><i class="fa fa-map-marker"></i></a>
<a href="#"><i class="fa fa-photo"></i></a>
<a href="#"><i class="fa fa-video-camera"></i></a>
<button type="submit" class="btn btn-primary btn-xs pull-right display-none" href="#">Post</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
<i class="fa fa-user fa-fw"></i> <a href="{{ url_for('public_user_page', userID=entry.userID) }}">{{entry.user_name}}</a>
<i class="fa fa-calendar fa-fw"></i> {{entry.date_posted}}
</p>
{% for tag in entry.tagList %}
<span class="label label-default">{{tag}}</span>
{% endfor %}
</div>
</div>
</div>
</div>
{% else %}
<h1><em>No entries!</em></h1>
{% endfor %}
</div>
</div>
</div>
</div>