当我切换到移动视图时，我的导航栏消失了

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

<!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>

来源

2017-03-05 Haidi

没有什么隐藏在暴民视图导航。你需要检查媒体查询（不在这里）和JavaScript。 –

当你隐藏在移动视图菜单，切换回桌面视图后，将留在菜单上你设置一个内联style="display:none;"风格。

为了解决这个问题，请在菜单上应用一个类来隐藏它，并且只能利用该类隐藏您的手机@media查询中的菜单。

function myFunction() { 
 
    var x = document.getElementById('ulstyle'); 
 
    x.classList.toggle('open'); 
 
}

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, 
 
    #ulstyle.open { 
 
    display: block; 
 
    } 
 
    #ulstyle { 
 
    background-color: pink; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    display: none; 
 
    } 
 
    li { 
 
    width: 100%; 
 
    height: 40px; 
 
    } 
 
}

<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>

来源

2017-03-05 21:22:49

当我切换到移动视图时，我的导航栏消失了

回答

相关问题