为什么我的按钮点击报错
来源：4-3 导航区
Ting111
2020-08-16 17:50:02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
.head{
height: 80px;
width: 100%;
display: flex;
flex-direction: row;
font-size: 20px;
}
a{
text-decoration: none;
color: #8B8B7A;
}
img{
max-width: 300px;
height: 80%;
}
.logo{
}
.lines{
height: 100%;
width: 5%;
display: flex;
flex-direction: column;
align-content: flex-end;
cursor: pointer;
justify-content: center;
}
.nav{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
}
.one,.two,.three{
height: 3px;
width: 30px;
background-color: black;
display: flex;
flex-direction:column;
margin-top:5px;
}
.nav-content{
width: 15%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
ul{
list-style: none;
}
.line{
height: 1px;
width: 100%;
background-color: grey;
}
.extend{
height: 200px;
}
.nav-extend{
border-bottom: 1px solid grey;
display: none;
}
.hide-line{
}
</style>
<link rel="stylesheet" type="text/css" href="C:\Users\fengting\Downloads\响应式布局（源码）\css\grid-flex.css">
</head>
<body>
<div class="head">
<div class="logo col-md-3 col-sm-10 col-lg-2">
<img src="../作业/图片/logo.jpg" >
</div>
<div class="lines col-sm-2 d-md-2 d-lg-none" id="btn">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<ul class="nav col-lg-9 col-sm-0 d-md-9" >
<li class="nav-content"><a href="">第1</a> </li>
<li class="nav-content"><a href="">第2</a> </li>
<li class="nav-content"><a href="">第3</a> </li>
<li class="nav-content"><a href="">第4</a> </li>
<li class="nav-content"><a href="">第5</a> </li>
</ul>
</div>
<div class="line"></div>
<ul class="nav-extend extend col-sm-2 d-md-2 d-lg-none" id="nav">
<li class="hide-line"><a href="">第1</a> </li>
<li class="hide-line"><a href="">第2</a> </li>
<li class="hide-line"><a href="">第3</a> </li>
<li class="hide-line"><a href="">第4</a> </li>
<li class="hide-line"><a href="">第5</a> </li>
</ul>
<script type="text/javascript">
var extend=document.getElementsByClassName('extend');
btn.onclick=function(){
if (nav.classList.contains(extend)) {
nav.classList.remove(extend)
}else{
nav.classList.add(extend)
}
}
</script>
</body>
</html>
1.html:137 Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('[object HTMLCollection]') contains HTML space characters, which are not valid in tokens.
at HTMLDivElement.btn.onclick
9回答
-
同学你好，非常抱歉给你带来不好的学习体验。老师针对提问问题回复一下：
1、参数需要是字符串形式的，否则浏览器会报错，变量未定义
2、使用extend类添加不可以是样式顺序的原因。默认是隐藏的
添加了extend类名后显示不起作用
因为extend类在nav-extend后面，隐藏覆盖了显示，没有看不到显示。换一下位置即可
3、小屏时出现，是因为没有添加隐藏的类。这部分在小屏中应该是隐藏的，显示另外一个列表
所以添加上了这两个类名，默认隐藏，中屏的时候显示出来
自己再测试理解下，祝学习愉快！
0 -
好帮手慕言
2020-08-23
同学你好，同学理解的是一部分，id的权重比类名的高，生效的是通过id设置的样式，设置
display: flex;元素不会隐藏，如果想在点击按钮时，列表能够正常的显示隐藏，可以给#nav设置display：none，当添加上nav-extend 类名时，增加权重，让列表显示出来。
祝学习愉快~
1 -
好帮手慕言
2020-08-23
同学你好，针对于同学的问题，解答如下：
1、首先，代码中没有display：row，另外：display的属性值没有row这项。同学是想表达设置了flex-direction: row;元素没有水平显示吗？如果是的话，那么：
在大屏情况下，元素display属性值是block，
设置的display: flex;没有生效，display: flex;不生效，设置的flex-direction: row;也就不会生效了。
建议：可以给li设置浮动，让其在一行显示，代码参考：
2、小屏时点击按钮，只有边框隐藏或者显示，内容没有隐藏，是因为去掉nav-extend这个类名之后，元素的display的属性值是flex，元素并不会隐藏。
建议：设置为display: none;当添加nav-extend 类名时，让元素显示出来（类名权重没有id的高，因此可以添加!important提升权重），
祝学习愉快~
0h020-08-23 -
Ting111
提问者
2020-08-23
老师我有两个问题，1，大屏下的加了d-md-block后显示是竖列，display；row没起作用，2，小屏点击按钮的时候只有表格下边框的线隐藏和显示了，你帮我看看哪里有问题谢谢~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
.head{
height: 80px;
width: 100%;
display: flex;
flex-direction: row;
font-size: 20px;
}
a{
text-decoration: none;
color: #8B8B7A;
}
img{
max-width: 300px;
height: 80%;
}
.logo{
}
.lines{
height: 100%;
width: 5%;
display: flex;
flex-direction: column;
align-content: flex-end;
cursor: pointer;
justify-content: center;
}
.nav{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
}
.one,.two,.three{
height: 3px;
width: 30px;
background-color: black;
display: flex ;
flex-direction:column;
margin-top:5px;
}
.nav-content{
width: 15%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
ul{
list-style: none;
}
.line{
height: 1px;
width: 100%;
background-color: grey;
}
.nav-extend{
display: block;
border-bottom: 1px solid grey;
}
.hide{
display: none;
}
#nav{
display: flex;
flex-direction: column;
}
</style>
<link rel="stylesheet" type="text/css" href="C:\Users\fengting\Downloads\响应式布局（源码）\css\grid-flex.css">
</head>
<body>
<div class="head">
<div class="logo col-md-3 col-sm-10 col-lg-2">
<img src="../作业/图片/logo.jpg" >
</div>
<div class="lines col-sm-2 d-md-2 d-lg-none" id="btn">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<ul class="nav col-lg-9 d-sm-none d-md-9 d-md-block" >
<li class="nav-content"><a href="">第1</a> </li>
<li class="nav-content"><a href="">第2</a> </li>
<li class="nav-content"><a href="">第3</a> </li>
<li class="nav-content"><a href="">第4</a> </li>
<li class="nav-content"><a href="">第5</a> </li>
</ul>
</div>
<div class="line"></div>
<ul id="nav" class="nav-extend hide col-sm-2 d-md-none d-lg-none">
<li class="hide-line"><a href="">第1</a> </li>
<li class="hide-line"><a href="">第2</a> </li>
<li class="hide-line"><a href="">第3</a> </li>
<li class="hide-line"><a href="">第4</a> </li>
<li class="hide-line"><a href="">第5</a> </li>
</ul>
<script type="text/javascript">
btn.onclick=function(){
if (nav.classList.contains('nav-extend')) {
nav.classList.remove('nav-extend')
}else{
nav.classList.add('nav-extend')
}
}
</script>
</body>
</html>
0 -
好帮手慕言
2020-08-17
同学你好，解答如下：
1、在小屏下，是通过nav-extend这个类名来控制元素的显示或隐藏。因此在js中，可以使用nav-extend这个类名来判断。
2、可以在导航外侧嵌套一层
改变结构之后，垂直居中可以使用行高的形式实现。
按钮：
祝学习愉快~
0h020-08-22 -
Ting111
提问者
2020-08-17
还有就是我的小屏右边会出现这个
0 -
Ting111
提问者
2020-08-17
.extend{
height: 200px;
display: block;
}
.nav-extend{
border-bottom: 1px solid grey;
display: none;
}
<ul class=" nav-extend col-sm-2 d-md-2 d-lg-none" id="nav">
<li class="hide-line"><a href="">第1</a> </li>
<li class="hide-line"><a href="">第2</a> </li>
<li class="hide-line"><a href="">第3</a> </li>
<li class="hide-line"><a href="">第4</a> </li>
<li class="hide-line"><a href="">第5</a> </li>
</ul>
<script type="text/javascript">
var extend=document.getElementsByClassName('extend');
btn.onclick=function(){
if (nav.classList.contains('extend')) {
nav.classList.remove('extend')
}else{
nav.classList.add('extend')
}
}
我用你说的那种办法试出来了，为什么这样就不行呢
0 -
好帮手慕言
2020-08-17
同学你好，使用修改后的代码测试（logo图是老师自己找的一张图片），默认下拉菜单不显示
点击按钮之后显示
如果不是指这里，可以结合图文描述问题，老师帮助解答，祝学习愉快~
0 -
好帮手慕言
2020-08-16
同学你好，是因为参数不对，改成下方即可
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-08-16
相似问题
回答 1
回答 6