Question

这是我的问题。我有一个tab-content div，其中有几个tab-pane，每个tab都有内容。我想在选项卡窗格的末尾实现一个关闭按钮（通常用于每个选项卡窗格，因此它可以关闭，但现在可以这样做）。关闭按钮应该隐藏窗格的内容，并且应该与窗格一起消失。毕竟，这是它的一部分。这就是问题所在。有两种方法可以做到这一点，似乎都不能正常工作。 “切换”隐藏内容，但即使窗格没有任何信息，窗格的轮廓仍然可见。 “隐藏”功能很棒，但是当重新选择选项卡时，它永远不会打开内容。

这里某处有类似案例吗？我试图用一个例子来准备一个JSFiddle，但由于某些原因它根本没有显示任何内容......我会在它准备好后发布它。

我希望你可能知道如何让它发挥作用。这里有很多例子，总是可以看到按钮，但我的窗格本身就会消失。它不是一个自举模式。

谢谢！

编辑：这是我的小提琴：https://jsfiddle.net/m4a3ssfd/6/

<nav class="navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="container" id="tabs">
            <button type="button" class="pull-left navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="glyphicon glyphicon-tasks"></span>
            </button>
            <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
                <ul class="nav navbar-nav" id="tabList">
                    <li id="lineupTab"><a href="#lineup" data-toggle="tab">LINE-UP</a></li>
                    <li id="statsTab"><a href="#statistics" data-toggle="tab">STATS</a></li>
                    <li id="resultsTab"><a href="#results" data-toggle="tab">RESULTS</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane container fade" id="lineup">
            no text yet
        </div>

        <div class="tab-pane container fade collapse collapse-group" id="statistics">
            <div class="row">
                <div class="col-md-6">
                    <div class="databox">
                        <div class="content">
                            <b>some text</b>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="databox">
                        <div class="content">
                            <b>some text</b>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <button class="btn btn-secondary btn-sm" data-toggle="collapse" data-target="#statistics" id="closeStats">x</button>
                </div>
            </div>
        </div>

        <div class="tab-pane container fade" id="results">
            no text yet
        </div>

    </div>
</nav>

由于某些原因，此处未显示制表符，否则它们在我的机器上正常工作。

Answer 1

很抱歉，我无法为您提供更好的小提琴，但我使用jQuery解决了它。我发现没有直接的bootstrap答案，所以jQuery的一小部分就可以解决这个问题。

$(document).ready(function () {
  $("#statsTab").on("click", function() {
    $("#statistics").css("display", "block");

    $("#closeStats").on("click", function() {
        $("#statistics").css("display", "none");
        $("#tabList li.active").removeClass("active");
    });
  });
});

这个想法基本上是通过隐藏活动面板的视图然后停用活动链接来处理选项卡窗格内的关闭按钮，以便菜单返回到其初始状态，即不显示默认选项卡。 / p>

关闭整个引导选项卡窗格

1 个答案: