Question

我正在尝试制作一些药片，点击后会显示并在某些内容之间切换。

这很好用。

我想再次点击活性药丸时隐藏内容。我无法上班。

这是我目前的代码，你可以尝试这个小提琴：https://jsfiddle.net/9phcsmwa/1/

当您单击其中一个药丸时，它将显示内容，当您单击另一个药丸时，它将在内容之间切换，如选项卡。但是，当点击活性药片时，如何隐藏内容？

<div id="accordion">
    <div data-parent="#accordion" href="">
        <ul id="tabs" class="nav nav-pills" data-toggle="collapse" data-tabs="tabs">
            <li><a data-toggle="tab" href="#Pill1" class="btn btn-s-md btn-white m-b">Pill1</a></li>
            <li><a data-toggle="tab" href="#Pill2" class="btn btn-s-md btn-white m-b">Pill2</a></li>
            <li><a data-toggle="tab" href="#Pill3" class="btn btn-s-md btn-white m-b">Pill2</a></li>
        </ul>
    </div>
</div>

<div id="collapse" class="panel-collapse collapse in">
    <div class="tab-content">
        <div id="Pill1" class="tab-pane fade">
            <h3>Pill 1</h3>
            <p>Some content.</p>
        </div>
        <div id="Pill2" class="tab-pane fade">
            <h3>Pill 2</h3>
            <p>Some content for Pill 2.</p>
        </div>
        <div id="Pill3" class="tab-pane fade">
            <h3>Pill 3</h3>
            <p>Some content for Pill 3.</p>
        </div>
    </div>
</div>

感谢。

Answer 1

您不需要使用javascript，只需更改所有对标签的引用即可折叠。标签用于始终显示，但是，崩溃是...崩溃！

Here is you JSFiddle Updated

更改包括：

您的所有data-toggle="collapse"现在都是class="tab-pane fade"。
您的所有class="collapse fade"现在都是data-parent="#accordion"。
在面板中包裹您的三个标签内容。这是由于Bootstrap中数据父项的错误。详细信息可以是found here。
删除data-parent="#collapse"，然后将{{1}}添加到所有三个药丸中。

Answer 2

您可以添加此jQuery代码：

String directory = "[jetty directory]";
String format = "/usr/bin/java -Djetty.logging.dir=%s/logs -Djetty.home=%s -Djetty.base=%s -Djava.io.tmpdir=/tmp -jar %s/start.jar jetty.state=%s/jetty.state jetty-logging.xml jetty-started.xml";

Process process = Runtime.getRuntime()
                     .exec(String.format(format, directory, directory, directory, directory, directory));

process.waitFor();

Updated JSFiddle

如何在引导程序中组合药丸，折叠和标签？

2 个答案: