我正在尝试使用带有jQuery插件哈希更改的手风琴和插件进行Twitter引导,如果使用location.hash打开页面并且多次点击其他项目,则项目可以' t切换关闭并保持一个打开。
有很好的解决方案,请帮助谢谢
使用hashchange标记: #collapseOne, #collapseTwo, #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
答案 0 :(得分:1)
试试这个(更新的哈希历史代码):
$('.accordion-heading a').click(function(e) {
var hash = $(this).attr('href');
document.title = 'The hash is ' + (hash.replace('#', '') || 'blank') + '.';
location.hash = hash;
});
<强> jsFiddle 强>
答案 1 :(得分:0)
你想要这样的事情fiddle
$('.accordion-toggle').on('click',function(e){
if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){
e.stopPropagation();
}
});