示例:http://www.royalnashef.com/sada/dotmaps/infobox/
在右侧,您会看到一个带有回形针图标和检查图标的导航组。
如果单击其中一个,隐藏的div .project-actions-sections
将正确显示。显示.project-actions-sections
div后,您可以在它们之间单击,它将正确地为您提供选项卡式效果。
问题。执行此操作后,.project-actions-sections
div会重新正确隐藏,但我似乎无法从导航中的链接.active
中删除parent li
类。
这是我的jquery:
$(".project-actions-nav .pullout-btn a").click(function() {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
$('.project-actions-sections').addClass("hide");
} else {
$('.project-actions-sections').removeClass("hide");
}
});
这是html:
<div id="infobox-accordion" class="project-actions clearfix">
<!-- Tab Nav -->
<ul class="nav nav-pills project-actions-nav" role="tablist">
<li class="pullout-btn active"><a href="#project-uploads-tab" role="tab" data-toggle="pill"><span class="glyphicon glyphicon-paperclip"></span></a></li>
<li class="pullout-btn"><a href="#project-completion-pullout" role="tab" data-toggle="pill"><span class="glyphicon glyphicon-ok"></span></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content project-actions-sections">
<div class="tab-pane fade pullout-section active in" id="project-uploads-tab">
<p>Test Tab #1</p>
</div>
<div id="project-completion-pullout" class="tab-pane fade pullout-section">
<p>Test Tab #2</p>
</div>
</div>
</div>
我正在使用jQuery 1.11.1和bootstrap for scaffolding和base js。
非常感谢任何帮助。
答案 0 :(得分:1)
所以....我必须在我删除类.active的函数上设置setTimeout()。原因是Bootstrap的js在每次点击时添加了.active类,包括我试图删除该类的那些。
这是新代码:
$(".pullout-btn a").click(function(e) {
e.preventDefault();
if ($(e.target).closest('li').hasClass('active')) {
$('.project-actions-sections').addClass("hide");
setTimeout(function() {
$(e.target).closest('li').removeClass('active');
}, 10);
} else {
$('.project-actions-sections').removeClass("hide");
}
});