javascript - 单击按钮时折叠的导航栏未关闭
问题描述
我知道发布了类似的问题,但解决方案对我不起作用。谁能帮我看看?
我也尝试将 data-toggle 和 data-target 转换为 ahref,但它不起作用。不确定它是否与css有关。我在这里先向您的帮助表示感谢!
.navbar a {
text-decoration: none;
color: black;
}
.navbar a.navbar-brand {
height: inherit;
line-height: inherit;
padding-top: 25px;
font-size: 32px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}
.navbar a.navbar-brand span {
font-size: 38px;
font-weight: 700;
}
.navbar {
margin: 0 auto;
text-align: center;
}
.nav {
height: 52px;
width: 100%;
background-color: #4679b2;
position: relative;
z-index: 10;
}
.nav>.nav-header {
display: inline;
}
.nav>.nav-header>.nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 7px 10px 10px 10px;
}
.nav>.nav-btn {
display: none;
}
.nav>.nav-links {
display: inline;
float: right;
font-size: 18px;
}
.nav>.nav-links>a {
display: inline-block;
padding: 14px 20px 12px 10px;
text-decoration: none;
color: #efefef;
}
.nav>.nav-links>a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>#nav-check {
display: none;
}
@media (max-width:850px) {
.nav>.nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav>.nav-btn>label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav>.nav-btn>label:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>.nav-btn>label>span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav>.nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
}
.nav>.nav-links>a {
display: block;
width: 100%;
}
.nav>#nav-check:not(:checked)+.nav-links {
height: 0px;
}
.nav>#nav-check:checked+.nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}
<div class="nav-links" data-toggle="collapse" data-target=".nav-collapse.in">
<a href="#!/displayAuditorium">Auditorium</a>
<a href="#!/displayExhibition">Exhibition</a>
<a href="#!/displayHotel">Hotel</a>
</div>
解决方案
我不确定,但我认为 data-target 属性应该引用一个 id。您引用了 .nav-collapse.in,它是一个类。
尝试给你的导航栏一个 id。
推荐阅读
- shell - 如何删除文件开头的两个匹配字符串(仅第一次出现)之间的文本?
- javascript - React Material-UI 完全覆盖弹出框
- haskell - 获取所有字符串拆分
- c++ - 在 C++ 中实现 LinkedList 时出现预期未处理错误
- python-3.x - Python每隔定义的时间清除lru_cache
- javascript - 范围错误:超出最大调用堆栈大小 - JavaScript
- elasticsearch - UncategorizedExecutionException[执行失败];嵌套:IOException [连接已关闭] - ElasticSearch
- c - 关于函数参数中 C99 的数组大小“保证”特性的实际优势?
- google-sheets - 如何组合来自多个 Google 表格的数据并组织/过滤它?
- vue.js - 检查 nuxt-child 是否为空