jquery - 当我在响应模式下切换菜单时，菜单会隐藏-6ren

jquery - 当我在响应模式下切换菜单时，菜单会隐藏

转载作者：太空宇宙更新时间：2023-11-04 08:08:52

24

4

我有一个响应式菜单，在响应式模式下，您可以使用 jquery 中的按钮切换它。问题是当我将屏幕变小并切换菜单(打开和关闭它)时，当我返回桌面模式时，菜单仍然保持隐藏状态，这次没有按钮可以切换它，因为它处于桌面模式并且没有任何东西可以切换它.只有当您刷新页面菜单时才会返回。

我试过这个:

@media screen and (min-width:873px) {
    #navbar{
        visibility: visible;
        display: block;
    }
}

还有这个:

@media screen and (max-width:873px) {
    #navbar{
        visibility: visible;
        display: block;
    }
}

而且它们都不起作用。我怎么解决这个问题？也许用 css 或 jquery？

我的切换菜单的 jquery 代码:

$(document).ready(function(){
    $(".navbar-toggle").click(function(){
        $("#navbar").toggle(500);
    });
});

@import url(http://fonts.googleapis.com/css?family=PT+Sans);
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'PT Sans', Arial, Verdana;
  background-color: #eee;
}
h1 {
  text-align: center;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #222;
}
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 120px;
  margin: auto;
  position: relative;
  background-color: #2c3e50;
  z-index: 7;
}
.menu li {
  float: left;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.menu a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  font-size: 18px;
  z-index: 9;
}
a.active {
  background-color: #e74c3c;
  pointer-events: none;
}
.navbar-toggle{
	display: none;
}
@media screen and (max-width:872px) {
	.menu {
		margin-top: 0;
		height: 300px;
		display: none;
		position: relative;
	}
	.menu li {
	  float: right;
	  width: 100%;
	  height: 14%;
	  margin: 0;
	  padding: 0;
	}
	.res-menu{
		display: block;
	}
	.navbar-toggle{
		display: block;
		margin-top: 15px;
		margin-right: 15px;
	}
	.nav-logo{
		display: none;
	}
}

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>css3 Responsive menu effect</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	
  
</head>

<body>
<button type="button" class="navbar-toggle">
	<span class="big-font"><i class="fa fa-bars" aria-hidden="true"></i></span>
</button><div class="clearfix"></div>
<ul class="menu" id="navbar">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
	$(document).ready(function(){
		$(".navbar-toggle").click(function(){
			$("#navbar").toggle(500);
		});
	});
	</script>
</body>
</html>

最佳答案

使用EnquireJS

enquire.register("screen and (max-width: 873px)", {
  match: function () {
     // do something if condition is true
  },
  unmatch: function () {
     // check if navbar was closed
     if (!$("#navbar").is(":visible"))
     {
         // then open it again
         $("#navbar").toggle(500);
     }
  },
  // make this execute on start
  deferSetup: true
})

测试片段全屏运行并调整浏览器大小

$(document).ready(function() {
  $(".navbar-toggle").click(function(event) {
    event.stopPropagation();
    $("#navbar").toggle(500);
  });

  enquire.register("screen and (max-width: 872px)", {
    match: function () {
      // if you want to do something when it is true
    },
    unmatch: function () {
      // check if navbar is not visible
      if (!$("#navbar").is(":visible")) {
        // then show it again
        $("#navbar").toggle(500);
      }
    },
    // make this execute on start
    deferSetup: true
  });
});

@import url(http://fonts.googleapis.com/css?family=PT+Sans);
* {
  box-sizing: border-box;
}

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

body {
  font-family: 'PT Sans', Arial, Verdana;
  background-color: #eee;
}

h1 {
  text-align: center;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #222;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 120px;
  margin: auto;
  position: relative;
  background-color: #2c3e50;
  z-index: 7;
}

.menu li {
  float: left;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.menu a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  font-size: 18px;
  z-index: 9;
}

a.active {
  background-color: #e74c3c;
  pointer-events: none;
}

.navbar-toggle {
  display: none;
}

@media screen and (max-width:872px) {
  .menu {
    margin-top: 0;
    height: 300px;
    display: none;
    position: relative;
  }
  .menu li {
    float: right;
    width: 100%;
    height: 14%;
    margin: 0;
    padding: 0;
  }
  .res-menu {
    display: block;
  }
  .navbar-toggle {
    display: block;
    margin-top: 15px;
    margin-right: 15px;
  }
  .nav-logo {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>css3 Responsive menu effect</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
  <button type="button" class="navbar-toggle">
	<span class="big-font"><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
  <div class="clearfix"></div>
  <ul class="menu" id="navbar">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>

</html>

希望对你有帮助

关于jquery - 当我在响应模式下切换菜单时，菜单会隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46418732/

24

4

0

文章推荐： python - %(something)s 是什么意思？

文章推荐： java - Linux (Ubuntu 12.04) 的多线程性能很糟糕？

文章推荐： python - 试图理解为什么这段 Python 代码有效

文章推荐： java - 从字符串java中提取日期

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

jquery - 当我在响应模式下切换菜单时，菜单会隐藏