【发布时间】：2017-10-13 17:21:03
【问题描述】：
所以我的引导模式有问题。我将它放在手风琴中，它在第一个手风琴面板中完美运行，但在第二个手风琴面板中它不适用于任何元素。现在，这里有点棘手，它只有在两个面板都打开时才有效。因此，如果我将第一个手风琴面板打开，则模式将在第二个手风琴面板中工作。但是，如果第一个折叠起来，它就不会出现。
这是第一个面板中的代码示例：
<div id="accordion" class="panel-group panel">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="accordion" href="#collapseOne">
<img class="human icon-1" src="code/img/cyclone.jpg" alt="human"></a>
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
<img class="arrow" src="code/img/arrow.jpg"></a>
</h4>
<a data-toggle="collapse" data-parent="accordion"
href="#collapseOne"><div class="human_rights">Humanitarian
Crises</div></a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-12">
<div class="container">
<div class="col-sm-3">
<div class="row">
</div>
<p class="para">Podcasts relating to the rights and protections of
persons at risk, from civilians in conflict zones to refugees and
asylum seekers on the move</p>
</div>
</div>
</div>
<img class="pod-pic col-sm-12" src="code/img/unicef_radio.jpg">
<div class="col-sm-10">
<p class="para-head">UNICEF Podcast</p>
<div class="sub-header">By: UNICEF</div>
<div>
<div class="col-sm-10">
<p class="para">A new global radio service from UNICEF focusing on the
health, education, equality and protection of children. Hosted by Blue
Chevigny with UNICEF correspondents from around the globe.</p>
<a href="https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?
mt=2"><img class="itunes" src="code/img/music_icon.jpg"></a>
<img class="rss" src="code/img/rss_icon.jpg">
<img class="share" src="code/img/share_icon.jpg" data-toggle="modal"
data-target="#myModal">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<!-- <button type="button" class="close" data-dismiss="modal">×
</button> -->
<h4 class="modal-title">Share This Podcast</h4>
</div>
<div class="modal-body">
<a class="icon_display" href="http://www.facebook.com/sharer.php?
u=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?mt=2"
target="_blank"><img class="facebook modal_share"
src="code/img/facebook.png"></a>
<a class="icon_display" href="https://twitter.com/share?
url=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?
mt=2&text=UNICEF%20Podcast%20By: UNICEF&hashtags=ReliefWeb"
target="_blank"><img class="twitter modal_share" src="code/img/twitter.png">
</a>
<a class="icon_display" href="https://plus.google.com/share?
url=https://itunes.apple.com/us/podcast/unicef-podcast/id77700259?mt=2"
target="_blank"><img class="google modal_share" src="code/img/google.png">
</a>
<a class="icon_display" href="http://www.linkedin.com/shareArticle?
mini=true&url=https://itunes.apple.com/us/podcast/unicef-
podcast/id77700259?mt=2"><img class="linkedin modal_share"
src="code/img/linkedin.png"></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default modal_btn" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- Modal End -->
And here is an example of the code for the second:
<div class="panel panel-default panel-two">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="accordion"
href="#collapseTwo"><img class="human" src="code/img/humanitarian-
learning.jpg" alt="mac"></a>
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><img class="arrow" src="code/img/arrow.jpg"></a>
</h4>
<a data-toggle="collapse" data-parent="accordion" href="#collapseTwo"><div
class="human_rights">Humanitarian Learning</div></a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-12">
<p class="description-para"> Podcasts to listen and learn about
humanitarian issues, find out about opportunities, develop new skills and
brush up on old ones.</p>
</div>
<img class="pod-pic col-sm-8" src="code/img/laws_of_war.jpg" data-
toggle="modal" data-target="#myModal">
<div class="col-sm-10">
<p class="para-head">Laws of War</p>
<div class="sub-header">By: Australian RedCross</div>
<div class="col-sm-10">
<p class="para">In this podcast, eminent academics and lawyers unpack the
laws of war, drawing on examples from Syria to South Sudan, Ukraine to the
United States.</p><a href="https://itunes.apple.com/au/podcast/laws-of-
war/id1020576810?mt=2"><img class="itunes itune_bottom"
src="code/img/music_icon.jpg"></a>
<img class="rss rss_bottom" src="code/img/rss_icon.jpg">
<img class="share" src="code/img/share_icon.jpg" data-toggle="modal" data-
target="#myModal">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<!-- <button type="button"
class="close" data-dismiss="modal">×</button> -->
<h4 class="modal-title">Share This Podcast</h4>
</div>
<div class="modal-body">
<a class="icon_display" href="http://www.facebook.com/sharer.php?
u=https://itunes.apple.com/au/podcast/laws-of-war/id1020576810?mt=2"
target="_blank"><img class="facebook modal_share"
src="code/img/facebook.png"></a>
<a class="icon_display" href="https://twitter.com/share?
target="_blank"><img class="twitter modal_share"
src="code/img/twitter.png"></a>
<a class="icon_display"
href="https://itunes.apple.com/au/podcast/laws-of-war/id1020576810?mt=2"
target="_blank"><img class="google modal_share" src="code/img/google.png">
</a>
<a class="icon_display"
href="http://www.linkedin.com/shareArticle?
mini=true&url=https://itunes.apple.com/au/podcast/laws-of-war/id1020576810?
mt=2"><img class="linkedin modal_share" src="code/img/linkedin.png"></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default modal_btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- Modal End -->
【问题讨论】：
标签： javascript jquery html bootstrap-modal