1

我有 twitter 引导手风琴控件，它有三行。我想要实现的是，例如，如果在 url 查询字符串中有参数，比如手风琴 = 1、手风琴 = 2 或手风琴 3，则在页面加载时扩展适当的手风琴。这是我的标记：

               <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>

欢迎任何建议，在此先感谢。

4

2 回答 2

1

您可以创建一个 javascript 函数来解析查询字符串，如此 SO 答案所示：Parse Querystring。然后，您可以调用折叠模块的显示操作。

// 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');
})();

编辑：您可以简单地从服务器端放置 id，而不是在 javascript 中解析查询字符串（如果您不使用 ASP.NET MVC，否则使用kadumel答案）。

(function() {
    var id = <%= Request.QueryString["accordion"] %>;
    $('#accordion' + id).collapse('show');
})();
于 2013-04-09T22:04:45.153 回答
0

在您的控制器中

Public ViewResult Index(int accordionId)
{
    ViewBag.AccordionId = accordionId;
    return View();
}

在你看来

{
@Html.Title = ViewBag.Title;
var accrdId = ViewBag.AccordionId;
}

然后在你的脚本中加载手风琴后使用类似 jpmorin 的东西说 -

$('#accordion' + accrdId).collapse('show');
于 2013-04-09T22:07:04.163 回答