请问手机版点击为什么不能出现导航？找问题一般咋找
来源：4-3 导航区
qq_精慕门9254520
2019-11-29 14:35:58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>导航自适应</title>
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header-container">
<div class="container">
<div class="row">
<div class="header-logo-container col-8 col-md-2">
<a href="###" class="header-logo">
<img src="img/logo.png" alt="logo">
</a>
</div>
<div class="header-btn-container col-4 d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
<div class="header-nav-container col-md-10 d-none d-md-block">
<ul class="header-nav">
<li class="header-nav-item"><a href="###" class="header-nav-link">网站首页</a></li>
<li class="header-nav-item">
<a href="###" class="header-nav-link">关于我们</a>
<!-- <ul class="header-nav-sub">
<li class="nav-sub-item"><a href="" class="nav-sub-link">企业简介</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">荣誉资质</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">团队风采</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">联系我们</a></li>
</ul> -->
</li>
<li class="header-nav-item"><a href="###" class="header-nav-link">经典案例</a>
<!-- <ul class="header-nav-sub">
<li class="nav-sub-item"><a href="" class="nav-sub-link">室内小间距系列</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">室内全彩蓝天系列</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">室内全彩常规系列</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">户外全彩系列</a></li>
</ul> -->
</li>
<li class="header-nav-item"><a href="###" class="header-nav-link">新闻动态</a>
<!-- <ul class="header-nav-sub">
<li class="nav-sub-item"><a href="" class="nav-sub-link">公司新闻</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">行业动态</a></li>
</ul> -->
</li>
<li class="header-nav-item"><a href="###" class="header-nav-link">解决方案</a>
<!-- <ul class="header-nav-sub">
<li class="nav-sub-item"><a href="" class="nav-sub-link">报告厅整体解决方案</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">会议室音视频解决</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">演艺厅解决方案</a></li>
</ul> -->
</li>
<li class="header-nav-item"><a href="###" class="header-nav-link">人才招聘</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">联系我们</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link weixin"><img src="img/tubiao03.png" alt=""></a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link youxiang"><img src="img/tubiao04.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
</div>
<nav class="nav-container d-md-none" id="nav">
<ul class="container">
<li><a href="" class="nav-link"></a>网站首页</li>
<li><a href="" class="nav-link">关于我们</a></li>
<li><a href="" class="nav-link">经典案例</a></li>
<li><a href="" class="nav-link">新闻动态</a></li>
<li><a href="" class="nav-link">人才招聘</a></li>
<li><a href="" class="nav-link">联系我们</a></li>
</ul>
</nav>
<script>
var nav=document.getElementById("nav");
var navExtendedClassName='nav-container-extended';
document.getElementById("btn-toggle").onclick=function(){
if(nav.classList.contains(navExtendedClassName)){
nav.classList.remove(navExtendedClassName);
}else{
nav.classList.add(navExtendedClassName);
}
};
</script>
</body>
</html>
/* 布局start */
.header-container{
width:100%;
border-bottom:1px solid #A6A6A6;
}
.header-btn-container,
.header-nav-container,
.header-logo-container{
height:80px;
}
.header-btn-container{
display:-webkit-flex;
display:-moz-box-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
justify-content: flex-end;
align-items: center;
}
/* 布局end */
/* 组件start */
.btn-toggle{
padding:10px;
border:none;
background:transparent;
border-radius: 4px;
cursor: pointer;
}
.btn-toggle:hover{
background:#f9f9f9;
}
.btn-toggle-bar{
display:block;
width:24px;
height:4px;
border-radius: 2px;
background:#363636;
}
.btn-toggle-bar+.btn-toggle-bar{
margin-top:4px;
}
.btn-toggle:hover .btn-toggle-bar{
background: #1428A0;
}
/* 组件end */
/* 内容start */
.header-logo{
width:160px;
height:100%;
display:flex;
justify-content: flex-start;
align-items: center;
}
.header-nav,
.header-nav-item,
.header-nav-link{
height:100%;
}
.header-nav{
display: flex;
justify-content: flex-end;
align-items: center;
font-size:15px;
}
.header-nav-item{
/* padding:0px 20px; */
margin-left:55px;
}
@media (max-width:1200px) {
.header-nav-item{
margin-left:40px;
}
}
@media (max-width:992px) {
.header-nav-item{
margin-left:10px;
}
}
.header-nav-item:first-child{
margin-left:0px;
}
.header-nav-link{
display: flex;
align-items: center;
}
.header-nav-item:hover .header-nav-link{
color:#1428A0;
}
/* nav */
.nav-container{
display: none;
height:0px;
border-bottom:1px solid #A6A6A6;
transform: height 0.5s;
/* position:relative;
top:-1; */
}
.nav-container-extended{
top:0px;
height:241px;
}
.nav-link{
display:block;
height:40px;
line-height:40px;
}
/* 内容end */
1回答
-
好帮手慕慕子
2019-11-29
同学你好， 对于你的问题解答如下：
可以按下f12打开控制台， 点击按钮查看导航项元素是否添加上类名了，然后在查看是否是其他样式影响了。 如下所示： 点击按钮的时候类名确实添加上了，但是由于nav的标签的其他类名设置了display:none;属性，导致其隐藏无法显示
调整为使用overflow属性让下拉框一开始处于隐藏状态
如果帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题