[英]twitter bootstrap accordion expand by querystring parameter in asp.net
I have twitter bootstrap accordion control which has three rows. 我有三行的twitter bootstrap手风琴控件。 What I want to achieve is for example if in the url querystring there is parameter, lets say accordion=1, accordion=2 or accordion3, the appropriate accordion to be expanded on page load. 我要实现的是例如在url查询字符串中是否有参数,比如说手风琴= 1,手风琴= 2或手风琴3,在页面加载时要扩展的适当手风琴。 This is the markup I have: 这是我的标记:
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Accordion One
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<!-- Content One Begin -->
<!-- Content One End -->
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Accordion Two
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
<!-- Annuity Policy Content Begin -->
<!-- Annuity Policy Content End -->
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Accordion Three
</a>
</div>
<div id="collapseThree" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
</div>
</div>
</div>
</div>
Every advice is welcomed, Thanks in advance. 欢迎每一个建议,在此先感谢。
You could create a javascript function to parse the querystring like shown in this SO answer : Parse Querystring . 您可以创建一个javascript函数来解析查询字符串,如下面的SO答案所示: Parse Querystring 。 Then, you can call the show action of the collapse module. 然后,您可以调用合拢模块的show动作。
// document ready
(function() {
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
var id = (qs[accordion] ? qs[accordion] : 1); // default = 1
$('#accordion' + id).collapse('show');
})();
EDIT: Instead of parsing the querystring in javascript you could simply put the id from the server side (if you are not using ASP.NET MVC, otherwise use kadumel answer). 编辑:而不是解析javascript中的querystring,您可以简单地从服务器端放置ID(如果您未使用ASP.NET MVC,请使用kadumel答案)。
(function() {
var id = <%= Request.QueryString["accordion"] %>;
$('#accordion' + id).collapse('show');
})();
In your controller 在您的控制器中
Public ViewResult Index(int accordionId)
{
ViewBag.AccordionId = accordionId;
return View();
}
In your view 在您看来
{
@Html.Title = ViewBag.Title;
var accrdId = ViewBag.AccordionId;
}
and then after your accordion loads in your scripts use something like jpmorin said - 然后在您的手风琴加载到脚本中之后,使用类似jpmorin的内容-
$('#accordion' + accrdId).collapse('show');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.