Question

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

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

Answer 1

当您在移动视图中隐藏菜单时，您将设置内联style="display:none;"样式，在切换回桌面视图后，该菜单将保留在菜单上。

要解决此问题，请在菜单中应用一个类来隐藏它，并仅使用该类隐藏移动@media查询中的菜单。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我切换到移动视图后，我的导航栏消失

1 个答案: