【问题标题】:how to keep the Bootstrap accordion keep one open , with hashchange event , click event?如何通过 hashchange 事件、click 事件保持 Bootstrap 手风琴保持打开状态?
【发布时间】:2013-07-16 10:20:30
【问题描述】:

我正在尝试使用手风琴和带有 jQ​​uery 插件哈希更改的插件来引导 Twitter,如果使用 location.hash 打开页面并单击其他项目更多次,在项目之前 可以' t 切换关闭并保持一个打开。

有好的解决办法,请帮忙谢谢

使用 hashchange 标签: #collapseOne, #collapse二, #collapseThree,

问题

  • 项目打开
  • 项目打开
  • 项目关闭

html

    <div class="row">
    <div class="span32">
        <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">Item #1</a>
                </div>
                <div id="collapseOne" class="accordion-body collapse">
                    <div class="accordion-inner">content1</div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">#2</a>
                </div>
                <div id="collapseTwo" class="accordion-body collapse">
                    <div class="accordion-inner">content2</div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">#3</a>
                </div>
            </div>
        </div>
    </div>
</div>

js

    $(function () {

        $(window).hashchange(function () {
            var hash = location.hash;
            var action = hash.replace('#', '');

            $('.accordion-heading a').click(function () {
                window.location.hash = $(this).attr("href");
                console.log('--------');
                console.log(location.pathname);
                console.log(hash);
            });

            switch (action) {
                case "collapseOne":
                    $("#collapseOne").collapse('toggle');
                    break;
                case "collapseTwo":
                    $("#collapseTwo").collapse('toggle');
                    break;
                case "collapseThree":
                    $("#collapseThree").collapse('toggle');
                    break;
                default:

                    break;
            };
        });
        $(window).hashchange();
    });

这里是demo

这里是code

【问题讨论】:

  • 不知道怎么说,像这种状态 1.going url - url#collapseOne 2.click item - url#collapseTwo 3.keyup back - open url#collapseOne && close - url#collapseTwo && 哈希变化

标签: jquery twitter-bootstrap accordion hashchange


【解决方案1】:

试试这个(哈希历史的更新代码):

$('.accordion-heading a').click(function(e) {
    var hash = $(this).attr('href');
    document.title = 'The hash is ' + (hash.replace('#', '') || 'blank') + '.';
    location.hash = hash;
});

jsFiddle

【讨论】:

  • thx,如果使用回来,如何在手风琴切换上添加监听器到 hashchange,像一些 history.state 一样到达。
  • Answer 和 jsFiddle 已更新,试试Updated Code for hash history
【解决方案2】:

你想要这样的东西fiddle

$('.accordion-toggle').on('click',function(e){
if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){
    e.stopPropagation();
}
});

【讨论】:

  • 谢谢,我试试。并有问题。我试着像一些history.state一样到达。在手风琴切换上添加监听器到 hashchange
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-04-18
  • 1970-01-01
  • 1970-01-01
  • 2015-07-23
  • 2022-07-26
相关资源
最近更新 更多