removeClass不处理父元素

时间:2014-09-17 17:56:14

标签: jquery twitter-bootstrap removeclass

示例: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。

非常感谢任何帮助。

1 个答案:

答案 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");
   }       
});