我的确有like this。它可以作为展示和预期。
但是,当禁用JavaScript时,该按钮不起作用。我可以采取哪些最简单的退款来克服这个问题?
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
<h2>Hello, how are you?</h2>
</div>
</div>
我创建了this codepen,但不确定崩溃为什么不起作用(我是Codepen的新手)。
答案 0 :(得分:5)
如果没有JS,您无法使用折叠功能,因此您必须默认手动显示.collapse内容。
在我看来,你有两个选择:
1。)检测JS是否被激活(例如使用modernizr)并在您的CSS中发表特殊声明。例如.no-js .collapse { display: block}
2。)使用noScript HTML标记,只有在禁用JS时才会加载。把它放在文档的开头
<noscript>
<style>
.collapse {
display: block;
}
</style>
</noscript>
(3.您可以将默认css设置为.collapse { display: block; }
并在页面加载时通过javascript更改它。但我想这会有点超过顶部..)
答案 1 :(得分:2)
我正在绞尽脑汁想要怎么做,但后来我发现了:
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
"show"
添加到班级列表来扩展。
所以我的解决方案:
HTML
<div class="collapse navbar-collapse justify-content-end show" id="navbarSupportedContent">
CSS
@media (max-width: 990px) {
a.nav-link {
text-align: center;
}
.navbar-nav {
flex-direction: row;
justify-content: space-around;
}
button.navbar-toggler {
opacity: 0;
}
}
编辑:(现在正在使用JS的window.matchMedia
API)
JS(jQuery - 可以很容易地用Vanilla JS完成)
var mq = window.matchMedia("(max-width: 990px)");
if (mq.matches) {
// change back to centered columns
$('.navbar-nav').css({'flex-direction': 'column', 'justify-content':
'center'});
// show toggle button
$('button.navbar-toggler').css('opacity', '1.0');
// collapse
$('.collapse.show').removeClass('show');
}