给定 Bootstrap 网站中用于折叠功能的以下代码:
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
我想做的是隐藏链接,一旦它打开就调用折叠功能,有人知道我可以在不添加额外的J的情况下做到这一点的方法吗?
6条答案
按热度按时间yshpjwxd1#
我用这个来隐藏单击后的按钮:
HTML(只添加了一个类“hide-me”):
CSS:
ztyzrc3y2#
这就是我真正想要的,没有任何CSS或JavaScript,只是简单地利用Bootstrap:
这是小提琴:
http://jsfiddle.net/hptrpaxh/1/
bmvo0sr53#
添加以下内容:
我建议您为这个按钮添加一个额外的类,或者给予它一个id以区别于其他按钮。
kb5ga3dv4#
很抱歉,没有看到你试图做到这一点没有额外的js。这里有一个简单的CSS技巧。你显然可以修改它以及
为按钮指定一个类,如hidden-button,然后使用以下CSS
这是一把小提琴
nfg76nw05#
这可以在Bootstrap 5(可能是4)中使用原生Accordion功能完成。将按钮和内容放在单独的可折叠项元素中,并根据文档在可折叠内容上设置父项。
请注意,我已经使用
b-0
隐藏了折叠式项目边框。uqcuzwp86#
如果你想在不重新加载页面的情况下折叠内容并再次显示链接,你可以将整个内容部分(你的
<div>
) Package 在<a>
元素中。将一些链接内容放在实际的可折叠内容之前,并为其给予一个class或id。然后,按照前面的answer中所述,向
<a>
标记添加一个自定义CSS类,但添加一个子选择器,如下所示:这将使链接“不太”可见,但您可以单击内容本身将其折叠,只显示链接。