为什么我的按钮点击报错

<!DOCTYPE html>

<html>

<head>

<style>

box-sizing: border-box;

margin:0;

padding: 0;

}

.head{

height: 80px;

width: 100%;

display: flex;

flex-direction: row;

font-size: 20px;

}

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>

</head>

<body>

</div>

</div>

</ul>

</div>

</ul>

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

Ting111 2020-08-16

源自：响应式布局 4-3 导航区

收起

9回答

好帮手慕星星回答被采纳获得+3积分 2020-08-22 13:58:18

同学你好，非常抱歉给你带来不好的学习体验。老师针对提问问题回复一下：

1、参数需要是字符串形式的，否则浏览器会报错，变量未定义

2、使用extend类添加不可以是样式顺序的原因。默认是隐藏的

添加了extend类名后显示不起作用

因为extend类在nav-extend后面，隐藏覆盖了显示，没有看不到显示。换一下位置即可

3、小屏时出现，是因为没有添加隐藏的类。这部分在小屏中应该是隐藏的，显示另外一个列表

所以添加上了这两个类名，默认隐藏，中屏的时候显示出来

自己再测试理解下，祝学习愉快！

收起回答

好帮手慕言 2020-08-23 19:56:15

同学你好，同学理解的是一部分，id的权重比类名的高，生效的是通过id设置的样式，设置

display: flex;元素不会隐藏，如果想在点击按钮时，列表能够正常的显示隐藏，可以给#nav设置display：none，当添加上nav-extend 类名时，增加权重，让列表显示出来。

祝学习愉快~

收起回答

好帮手慕言 2020-08-23 17:14:41

同学你好，针对于同学的问题，解答如下：

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提升权重），

祝学习愉快~

收起回答

提问者 Ting111 #1

所以我第二个问题里是因为我在id 和class里面都写了样式只有id的样式生效了是吗

2020-08-23 18:48:54

提问者 Ting111 2020-08-23 12:38:09

老师我有两个问题，1，大屏下的加了d-md-block后显示是竖列，display；row没起作用，2，小屏点击按钮的时候只有表格下边框的线隐藏和显示了，你帮我看看哪里有问题谢谢~

<!DOCTYPE html>

<html>

<head>

<style>

box-sizing: border-box;

margin:0;

padding: 0;

}

.head{

height: 80px;

width: 100%;

display: flex;

flex-direction: row;

font-size: 20px;

}

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>

</head>

<body>

</div>

</div>

</ul>

</div>

</ul>

btn.onclick=function(){

if (nav.classList.contains('nav-extend')) {

nav.classList.remove('nav-extend')

}else{

nav.classList.add('nav-extend')

}

</script>

</body>

</html>

收起回答

好帮手慕言 2020-08-17 15:02:29

同学你好，解答如下：

1、在小屏下，是通过nav-extend这个类名来控制元素的显示或隐藏。因此在js中，可以使用nav-extend这个类名来判断。

2、可以在导航外侧嵌套一层

改变结构之后，垂直居中可以使用行高的形式实现。

按钮：

祝学习愉快~

收起回答

提问者 Ting111 #1

我觉得你的回答没有一个回答到点上的，你只是在解释给你自己听，我第一次问的问题，我class名没打引号所以报错，你一个字没提，我看了好久才看出来，后来我问为什么一定要用nav-extend来获取ul而不能用别的类名，你也没说为什么，然后我问为什么我小屏下右边会出来一块多的列表你也没说为什么

2020-08-22 09:20:33