折叠引导选项卡 - 无法切换 .active 选项卡类

Posted 2023-05-08

【中文标题】折叠引导选项卡 - 无法切换 .active 选项卡类

【英文标题】：Collapse Bootstrap tabs - can't toggle .active tab class

【发布时间】：2017-02-16 07:14:26

【问题描述】：

我使用（样式化的）引导标签

我想在再次点击时关闭 Bootstrap 选项卡。

它部分工作，我可以关闭相应的面板，但是当我想切换选项卡的“活动”类时，脚本不起作用。

我的 JS 代码：

$('[data-toggle=tab]').click(function(e)
    if($(this).parent().hasClass('active'))
        e.preventDefault();

        // toggle 'active' tab class (styling)
        $(this).parent().toggleClass('active');

        // toggle 'active' panel class (hide it)
        $($(this).attr("href")).toggleClass('active');
    
)

所有代码（html、css、js）都在这里可见：https://jsfiddle.net/j9stkqf6/1/

如果您发表评论：

$(this).parent().toggleClass('active');

面板被隐藏

我也尝试了步进/步进调试模式 一切正常，直到 JS 函数结束，全部重新出现（tab.active 类和面板）

您能帮我关闭面板并在再次单击选项卡时切换选项卡“活动”类吗？

谢谢！

【参考方案1】：

终于搞定了：

除了“e.preventDefault()”之外，我还必须将“e.stopPropagation()”添加到我的 javascript 中

'e.preventDefault()' 停止 Bootstrap 对该事件的操作（单击 A 链接）

'e.stopPropagation()' 避免来自 Bootstrap 的其他操作（捕捉点击 LI）

参见。 e.preventDefault() vs e.stopPropagation()

$('[data-toggle=tab]').click(function(e)
    if($(this).parent().hasClass('active'))

    e.preventDefault();
    e.stopPropagation();

        $(this).parent().removeClass('active');

        $($(this).attr("href")).removeClass('active');
        $($(this).attr("href")).removeClass('in');

        $(this).attr("aria-expanded", false);
    
)

您可以在此处查看我的工作示例：https://jsfiddle.net/j9stkqf6/10/

【参考方案2】：

附上的 Demo 可以帮到你

方法一

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading " role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#per" aria-expanded="true" aria-controls="collapseOne">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 1</strong>
                </a>
            </h4>
        </div>
        <!--To make by defualt open a any panel put class "in" (without quotes)-->
        <div id="per" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                Link 1    Link 1    Link 1    Link 1    Link 1    Link 1
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#family" aria-expanded="false" aria-controls="collapseTwo">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 2</strong>
                </a>
            </h4>
        </div>
        <div id="family" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                Link 2  Link 2  Link 2  Link 2  Link 2  Link 2
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#social" aria-expanded="false" aria-controls="collapseThree">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 3</strong>
                </a>
            </h4>
        </div>
        <div id="social" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                Link 3  Link 3  Link 3  Link 3 Link 3   Link 3  Link 3
            </div>
        </div>
    </div>
</div>

方法二

要一起折叠，你也可以使用类似的东西，你可以折叠所有具有“in”类的导航，因为打开的可折叠添加了“in”类。您可以使用下面的脚本关闭它们。

 $('#accordion .collapse').on('show.bs.collapse', function (e) 
        $('#accordion .in').collapse('hide');
    );

【讨论】：

好的，您的演示使用手风琴的“折叠”功能。我再试一次。我已经尝试过“折叠”，难以对标题操作不同的状态（打开/关闭），但这是另一个问题。我仍然很想知道为什么我的代码（带有标签）不起作用以及如何解决切换问题。谢谢

你应该使用方法2