【发布时间】:2013-07-16 10:20:30
【问题描述】:
我正在尝试使用手风琴和带有 jQuery 插件哈希更改的插件来引导 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