【发布时间】：2018-05-17 13:02:38
【问题描述】：
编辑：这里已经解决了：Open a specific accordion panel with an external anchor link
我正在循环播放手风琴（使用 Coldfusion），它正在显示数据并且工作正常。我正在尝试根据链接 (page.cfm#collapse20) 打开任何面板。
这是没有任何 Coldfusion 的手风琴代码...
(function() {
var searchTerm, panelContainerId;
// Create a new contains that is case insensitive
$.expr[':'].containsCaseInsensitive = function(n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('#accordion_search_bar').on('change keyup paste click', function() {
searchTerm = $(this).val();
$('#accordion > .panel').each(function() {
panelContainerId = '#' + $(this).attr('id');
$(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
$(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
});
});
}());<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container"
id="page_container">
<div id="accordion_search_bar_container">
<input type="search"
id="accordion_search_bar"
placeholder="Search"/>
</div>
<div class="panel-group"
id="accordion"
role="tablist"
aria-multiselectable="true">
<div class="panel panel-success"
id="collapseOne_container">
<div class="panel-heading"
role="tab"
id="headingOne">
<h4 class="panel-title">
<a role="button"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
One
</a>
</h4>
</div>
<div id="collapseOne"
class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
<p>Pellentesque convallis dolor</p>
<p>Enim at tincidunt magna dapibus vitae</p>
</div>
</div>
</div>
<div class="panel panel-primary"
id="collapseTwo_Container">
<div class="panel-heading"
role="tab"
id="headingTwo">
<h4 class="panel-title">
<a class="collapsed"
role="button"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
Two
</a>
</h4>
</div>
<div id="collapseTwo"
class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingTwo">
<div class="panel-body">
<p>Vestibulum in laoreet nisi</p>
<p>Sit amet placerat massa</p>
</div>
</div>
</div>
<div class="panel panel-danger"
id="collapseThree_Container">
<div class="panel-heading"
role="tab"
id="headingThree">
<h4 class="panel-title">
<a class="collapsed"
role="button"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree">
Three
</a>
</h4>
</div>
<div id="collapseThree"
class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingThree">
<div class="panel-body">
<p>Curabitur sem eros tempor sit</p>
<p>Amet nunc eget, gravida mollis</p>
</div>
</div>
</div>
</div>
</div>同样，我只是在寻找一种使用锚定链接打开任何手风琴的解决方案。
如果我需要提供更多信息，请告诉我，感谢您的帮助！
【问题讨论】：
-
您好，Archer，感谢您的回复。所以，我把它放在我的页面底部，在另一个 JS 之后，在一个脚本标签中，但它还不适用于我。这是实现它的正确方法吗？
-
这应该可以解决问题，是的，但是如果手风琴在遇到该代码时尚未实现，那么它将无法工作。这很可能是您面临的问题。
-
尝试加载页面，然后在控制台中运行该代码 - 这将告诉您它是否可以工作。
-
我在结束正文标记之前有它。手风琴工作，但我的锚链接没有把我带到那里或打开任何东西。我正在使用正确的 ID（折叠）还是应该是“标题”或其他？非常感谢。
-
除了缺少一些字体外，控制台 (Chrome) 中没有显示任何内容。你是这个意思吗？
标签： jquery twitter-bootstrap coldfusion