[英]Open a specific accordion panel with an external anchor link
我有一个引导手风琴设置并且工作正常。
我需要在外部页面上有链接,这将:
A) 带您到手风琴内的指定面板
B) 打开指定面板
链接结构需要采用这种格式(示例):
Page.html#collapseTwo
(当然,“collapseTwo”会改变,具体取决于面板)
HTML:
<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>
JS:
(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();
});
});
}());
您可以使用url parameters
并执行此操作。
示例链接:
https://output.jsbin.com/talojodupa/1?panel=collapseOne
https://output.jsbin.com/talojodupa/1?panel=collapseTwo
jsbin 链接: https ://jsbin.com/talojodupa/1/edit ? html,js,output
(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(); }); }); /* Function to get url parameter based on param name */ function getUrlParameter(key) { key = key.replace(/[\\[]/, "\\\\\\[").replace(/[\\]]/, "\\\\\\]"); var regex = new RegExp("[\\\\?&]" + key + "=([^&#]*)"); var results = regex.exec(window.location.href); if (results == null) return ""; else return unescape(results[1]).replace(/<script.*>.*<\\/script>/g, ""); } var panelId = getUrlParameter('panel'); if(panelId){ var $panel = $('#'+panelId); $panel.addClass('in'); $('html,body').animate({ scrollTop: $panel.offset().top}, 'slow'); } }());
你可以试试这个:
JS code:
$(function () {
// check if there is a hash in the url
if (window.location.hash != '') {
// show the panel based on the hash now.
$(window.location.hash + '.collapse').collapse('show');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.