當我切換到移動視圖時，我的導航欄消失了

我切換到了移動視圖後，我的導航欄消失了。當我縮小瀏覽器時，它會更改爲移動視圖，然後單擊箭頭按鈕以查看菜單，然後再次單擊以隱藏它們。一旦我隱藏，然後回到瀏覽器視圖，一切都消失了。我不知道爲什麼，我想我錯過了一些東西。這是代碼。當我切換到移動視圖時，我的導航欄消失了

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

當我切換到移動視圖時，我的導航欄消失了

回答

相關問題