Javascript显示/隐藏功能

时间：2016-11-07 20:33:18

标签： javascript jquery toggle hide show

任何人都可以看到为什么我的菜单没有显示/隐藏？ 我已经好几个小时了！ ＆安培;我确定它有点傻。

我要求导航器显示一个菜单项＆＃39; menu＆＃39;当媒体查询开始隐藏菜单时。然后该按钮将切换导航菜单。

这是jsfiddle。我刚刚把所有代码都放进去，所以你可以看到一切 https://jsfiddle.net/Doops/ut1d28c4/1/

CSS：

/* Responsive -1024 */
@media screen and (max-width: 1024px) {
  body {
    background-color: black; }

  .header {
    width: 90% !important; }

  .brand {
    width: 30% !important; }

  .brand img {
    display: block !important;
    margin: auto !important;
    max-width: 190px !important;
    width: auto !important;
    height: auto !important; } }
/* Responsive -720 */
@media screen and (max-width: 720px) {
  body {
    background-color: pink; }

  .header {
    width: 100% !important; }

  .brand img {
    display: block !important;
    margin: auto !important;
    max-width: 190px !important;
    width: auto !important;
    height: auto !important; }

  .brand {
    width: 100% !important;
    float: none !important; }

  .nav {
    display: none !important;
    float: none !important;
    width: 100% !important; }

  .nav ul, .navmenu ul {
    width: 100% !important; }

  .nav li, .navmenu ul {
    display: block !important;
    padding: 5px 0 !important;
    height: auto !important;
    text-align: center; }

  .nav li a, .navmenu ul a {
    line-height: 34px !important; }

  .navmenu {
    display: block !important;
    visibility: visible !important; } }
/* END RESPONSIVE */
body {
  padding: 0px;
  margin: 0px; }

.header {
  width: 68%;
  margin: auto;
  background-color: aqua; }

.brand img {
  padding-top: 43px;
  display: block;
  margin: auto; }

.brand {
  width: 190px;
  height: 120px;
  float: left; }

.brand:hover {
  background-color: #dddddd; }

.nav {
  padding: 0px;
  margin: 0px;
  width: 70%;
  float: right;
  background: red; }

.nav ul, .navmenu ul {
  float: right;
  padding: 0px;
  margin: 0px; }

.nav li, .navmenu {
  display: inline-block;
  padding: 0px;
  margin: 0px; }

.nav li:hover, .navmenu li:hover {
  background-color: #dddddd; }

.nav li a, .navmenu li a {
  color: #333333;
  line-height: 120px;
  vertical-align: middle;
  text-decoration: none !important;
  font-family: "proxima-nova", sans-serif !important; }

.navmenu {
  display: none;
  visibility: none; }

h1 {
  font-family: "proxima-nova", sans-serif !important;
  -webkit-font-smoothing: antialiased; }

div a, div ul li a, p, .btn {
  font-family: "proxima-nova", sans-serif !important;
  -webkit-font-smoothing: antialiased; }

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

JAVASCRIPT：

<!-- JAVASCRIPT -->
<script type="text/javascript">
/* $('.brand').hide(); */
$('.menu').click(function(){
    $('.nav').toggle();
});
</script>
<!-- /JAVASCRIPT -->

HTML：

<!doctype html>
<html lang="en">
<head>

<!-- INFO -->
<title># | Web Test</title>

<link rel="icon" href="images/icons/favicon.ico" type="image/png"/>

<meta name="description" content="Web Test for Sputnik">
<!-- /INFO -->


<meta charset="utf-8">

<!-- STYLE -->
<link rel="stylesheet" href="css/style.css">
<!-- /STYLE -->

<!-- STYLE ON PAGE -->

<style>


</style>

<!--/ STYLE op -->

<!-- JQuery --><script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- /JQuery -->

<!-- JAVASCRIPT -->
<script type="text/javascript">
/* $('.brand').hide(); */
$('.menu').click(function(){
    $('.nav').toggle();
});
</script>
<!-- /JAVASCRIPT -->



</head>

<body>

<div class="header">

<!-- NAVIGATION -->
<div class="brand">

    <img src="images/img.png" height="34" width="190">

</div>
<div class="navmenu">
<ul>
    <li><a href="#" class="menu">&nbsp;MENU&nbsp;</a></li>
</ul>
</div>
<div class="nav">
<ul>
    <li><a href="#">&nbsp;About Us&nbsp;</a></li>
    <li><a href="#">&nbsp;Our Work&nbsp;</a></li>
    <li><a href="#">&nbsp;News&nbsp;</a></li>
    <li><a href="#">&nbsp;Career&nbsp;</a></li>
    <li><a href="#">&nbsp;Contact Us&nbsp;&nbsp;</a></li>
</ul>
</div>


</div> <!-- /Header -->

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->

</body>
</html>

非常感谢任何帮助者！杰森。

3 个答案:

答案 0 :(得分：0)

在此处删除！important属性：

@media screen and (max-width: 720px)
.nav {
    display: none !important;  
    /*...*/
}

答案 1 :(得分：0)

我在页面的最底部找到了它。从底部开始17行。在那里，您.navmenu visibility:none;（无效值，正确值为hidden）和display: none。同时删除此!important：

.nav {
    display: none !important;
}

。我希望这能为你提供你想要的结果。

答案 2 :(得分：0)

解决！

我已将菜单的ul包装在另一个标签中并相应地设置了相应的样式。

随意使用我的新代码获取一个简单的响应式菜单，我确信有更好的方法，但它为我的目的服务。

https://jsfiddle.net/ut1d28c4/3/

HTML：

<!doctype html>
<html lang="en">
<head>

<!-- INFO -->
<title># | Web Test</title>

<link rel="icon" href="images/icons/favicon.ico" type="image/png"/>

<meta name="description" content="Web Test for Sputnik">
<!-- /INFO -->


<meta charset="utf-8">

<!-- STYLE -->
<link rel="stylesheet" href="css/style.css">
<!-- /STYLE -->

<!-- STYLE ON PAGE -->

<style>


</style>

<!--/ STYLE op -->

<!-- JQuery --><script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- /JQuery -->

<!-- JAVASCRIPT -->
<script type="text/javascript">
$(document).ready(function(){
$('.menu').click(function(){
    $('nav').slideToggle();
});})
</script>
<!-- /JAVASCRIPT -->



</head>

<body>

<div class="header">

<!-- NAVIGATION -->
<div class="brand">

    <img src="images/Sputnik.png" height="34" width="190">

</div>
<div class="navmenu">
<ul>
    <li><a href="#" class="menu">&nbsp;MENU&nbsp;</a></li>
</ul>
</div>
<div class="nav">
<nav>
<ul>
    <li><a href="#">&nbsp;About Us&nbsp;</a></li>
    <li><a href="#">&nbsp;Our Work&nbsp;</a></li>
    <li><a href="#">&nbsp;News&nbsp;</a></li>
    <li><a href="#">&nbsp;Career&nbsp;</a></li>
    <li><a href="#">&nbsp;Contact Us&nbsp;&nbsp;</a></li>
</ul>
</nav>
</div>


</div> <!-- /Header -->

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->

</body>
</html>

CSS：

@media screen and (max-width: 1024px) {
  body {
    background-color: black; }

  .header {
    width: 90% !important; }

  .brand {
    width: 30% !important; }

  .brand img {
    display: block !important;
    margin: auto !important;
    max-width: 190px !important;
    width: auto !important;
    height: auto !important; } }
/* Responsive -720 */
@media screen and (max-width: 720px) {
  body {
    background-color: pink; }

  .header {
    width: 100% !important; }

  .brand img {
    display: block !important;
    margin: auto !important;
    max-width: 190px !important;
    width: auto !important;
    height: auto !important; }

  .brand {
    width: 100% !important;
    float: none !important; }

  nav {
    display: none; }

  .nav {
    display: block !important;
    float: none !important;
    width: 100% !important; }

  .nav ul, .navmenu ul {
    width: 100% !important; }

  .nav li, .navmenu ul {
    display: block !important;
    padding: 5px 0 !important;
    height: auto !important;
    text-align: center; }

  .nav li a, .navmenu ul a {
    line-height: 34px !important; }

  .navmenu {
    display: block !important;
    visibility: visible !important; } }
/* END RESPONSIVE */
body {
  padding: 0px;
  margin: 0px; }

.header {
  width: 68%;
  margin: auto;
  background-color: aqua; }

.brand img {
  padding-top: 43px;
  display: block;
  margin: auto; }

.brand {
  width: 190px;
  height: 120px;
  float: left; }

.brand:hover {
  background-color: #dddddd; }

.nav {
  display: block; }

.nav {
  display: block;
  padding: 0px;
  margin: 0px;
  width: 70%;
  float: right;
  background: red; }

.nav ul, .navmenu ul {
  float: right;
  padding: 0px;
  margin: 0px; }

.nav li, .navmenu {
  display: inline-block;
  padding: 0px;
  margin: 0px; }

.nav li:hover, .navmenu li:hover {
  background-color: #dddddd; }

.nav li a, .navmenu li a {
  color: #333333;
  line-height: 120px;
  vertical-align: middle;
  text-decoration: none !important;
  font-family: "proxima-nova", sans-serif !important; }

.navmenu {
  display: none; }

h1 {
  font-family: "proxima-nova", sans-serif !important;
  -webkit-font-smoothing: antialiased; }

div a, div ul li a, p, .btn {
  font-family: "proxima-nova", sans-serif !important;
  -webkit-font-smoothing: antialiased; }

感谢您帮助x

相关问题
最新问题