Jquery removeClass isn';t处理父元素

Jquery 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

例如:

在右侧,您将看到一个带有回形针图标和支票图标的导航组。 如果单击其中一个,隐藏的div
。项目操作部分将正确显示。一旦显示
.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删除它。对于如何处理这个问题,你有什么建议吗?无论如何,这不是一个特别直观的界面。我不希望一个活动的选项卡像那样切换面板。考虑在面板上放置一个解开图标或一个切换句柄。