Javascript 一旦我切换到移动视图，我的导航栏就消失了_Javascript_Html_Css

Javascript 一旦我切换到移动视图，我的导航栏就消失了

javascript html css

Javascript 一旦我切换到移动视图，我的导航栏就消失了,javascript,html,css,Javascript,Html,Css,一旦我切换到移动视图，我的导航栏就消失了。当我收缩浏览器时，它将更改为移动视图，然后单击向下箭头按钮以查看菜单，然后再次单击以隐藏它们。一旦我隐藏，然后切换回浏览器视图，一切都消失了。我不知道为什么，我想我错过了什么。这是密码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Search Engine</title> <link href="htt

一旦我切换到移动视图，我的导航栏就消失了。当我收缩浏览器时，它将更改为移动视图，然后单击向下箭头按钮以查看菜单，然后再次单击以隐藏它们。一旦我隐藏，然后切换回浏览器视图，一切都消失了。我不知道为什么，我想我错过了什么。这是密码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Search Engine</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

html, body{
    padding:0;
    margin:0;
    }

.divbuttonright{
    text-align: right;
    display: none;
    }

    .buttondesign{
    background-color: yellow;
    border: none;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    outline: none;
    }

#ulstyle {
    list-style: none;
    padding: 0;
    margin:0;
    }

li{
    width: 109px;
    height: 40px;
    float: left;
    background-color: yellow;
    text-align: center;
    line-height: 40px;
    font-family: 'Oswald', sans-serif;
    }

li:hover{
    background-color: #333333;
    color:yellow;
    cursor: pointer;
    }

    a{
        color:inherit;
        text-decoration: none;
    }


@media screen and (max-width: 768px) {

    .divbuttonright{
        display: block;
    }

#ulstyle {
        background-color: pink;
        list-style: none;
        padding: 0;
        margin:0;
        width: 100%;
        display: none;

}

    li{
        width: 100%;
        height: 40px;
    }
}




</style>

</head>

<body>

<div class="divbuttonright"><button class="buttondesign" onclick="myFunction()">▼</button></div>

<ul id="ulstyle">
<a href="http://google.com"><li>Google</li></a>
<a href="http://yahoo.com"><li>Yahoo</li></a>
<a href="http://baidu.com"><li>Baidu</li></a>
<a href="http://aol.com"><li>AOL</li></a>
<a href="http://ask.com"><li>Ask.com</li></a>
<a href="http://excite.com"><li>Excite</li></a>
<a href="http://duckduckgo.com"><li>DuckDuckGo</li></a>
</ul>


<script>
function myFunction() {
    var x = document.getElementById('ulstyle');
    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
}
</script>

</body>
</html>


搜索引擎
html，正文{
填充：0；
保证金：0；
}
.divbuttonright{
文本对齐：右对齐；
显示：无；
}
.按钮设计{
背景颜色：黄色；
边界：无；
填充：15px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
光标：指针；
大纲：无；
}
#乌尔斯泰尔{
列表样式：无；
填充：0；
保证金：0；
}
李{
宽度：109px；
高度：40px；
浮动：左；
背景颜色：黄色；
文本对齐：居中；
线高：40px；
字体系列：“Oswald”，无衬线；
}
李：悬停{
背景色：#333333；
颜色：黄色；
光标：指针；
}
a{
颜色：继承；
文字装饰：无；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.divbuttonright{
显示：块；
}
#乌尔斯泰尔{
背景颜色：粉红色；
列表样式：无；
填充：0；
保证金：0；
宽度：100%；
显示：无；
}
李{
宽度：100%；
高度：40px；
}
}
▼


函数myFunction（）{
var x=document.getElementById（'ulstyle'）；
如果（x.style.display==='block'）{
x、 style.display='none'；
}否则{
x、 style.display='block'；
}
}

当您在移动视图中隐藏菜单时，您正在设置一个内嵌的

style=“display:none；”“

样式，切换回桌面视图后，该样式将保留在菜单上

要解决此问题，请对菜单应用一个类来隐藏它，并仅使用该类在移动

@media

查询中隐藏菜单

函数myFunction（）{
var x=document.getElementById（'ulstyle'）；
x、 切换（'open'）；
}

html，
身体{
填充：0；
保证金：0；
}
.divbuttonright{
文本对齐：右对齐；
显示：无；
}
.按钮设计{
背景颜色：黄色；
边界：无；
填充：15px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
光标：指针；
大纲：无；
}
#乌尔斯泰尔{
列表样式：无；
填充：0；
保证金：0；
}
李{
宽度：109px；
高度：40px；
浮动：左；
背景颜色：黄色；
文本对齐：居中；
线高：40px；
字体系列：“Oswald”，无衬线；
}
李：悬停{
背景色：#333333；
颜色：黄色；
光标：指针；
}
a{
颜色：继承；
文字装饰：无；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.divbuttonright，
#乌尔斯泰尔公开赛{
显示：块；
}
#乌尔斯泰尔{
背景颜色：粉红色；
列表样式：无；
填充：0；
保证金：0；
宽度：100%；
显示：无；
}
李{
宽度：100%；
高度：40px；
}
}

▼

在移动视图中没有隐藏导航的内容。您需要检查媒体查询（此处没有）和javascript。