Jquery removeClass isn';t处理父元素
例如: 在右侧,您将看到一个带有回形针图标和支票图标的导航组。 如果单击其中一个,隐藏的divJquery removeClass isn';t处理父元素,jquery,twitter-bootstrap,removeclass,Jquery,Twitter Bootstrap,Removeclass,例如: 在右侧,您将看到一个带有回形针图标和支票图标的导航组。 如果单击其中一个,隐藏的div。项目操作部分将正确显示。一旦显示.project actions部分div,您就可以在它们之间单击,它将为您提供正确的选项卡式效果 当您单击活动链接时,问题是。当您这样做时,.project actions部分div返回到正确隐藏状态,但我似乎无法从导航中链接的父li中删除.active类 以下是我的jquery: $(".project-actions-nav .pullout-btn a").cl
。项目操作部分将正确显示。一旦显示.project actions部分
div,您就可以在它们之间单击,它将为您提供正确的选项卡式效果
当您单击活动链接时,问题是。当您这样做时,.project actions部分
div返回到正确隐藏状态,但我似乎无法从导航中链接的父li
中删除.active
类
以下是我的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>
测试选项卡#1
测试选项卡#2
我正在使用jQuery1.11.1和bootstrap来构建脚手架和基本js
非常感谢您的帮助。所以。。。。我必须在删除class.active的函数上设置timeout()。原因是Bootstrap的js在每次单击时都会添加class.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");
}
});
它正在工作,看:是的,看起来很简单。我认为这可能与添加类的引导脚本有关。引导脚本告诉li添加类,我的脚本告诉li删除它。对于如何处理这个问题,你有什么建议吗?无论如何,这不是一个特别直观的界面。我不希望一个活动的选项卡像那样切换面板。考虑在面板上放置一个解开图标或一个切换句柄。