【发布时间】：2016-02-08 05:00:39
【问题描述】：
我正在我的 Wordpress 网站上为响应式移动导航编写 jQuery 脚本。我已经设置了它，以便我的导航菜单位于右侧，当我单击按钮时，它向左滑动并且 html 标记随之移动。
我在使用这个脚本时遇到了一些问题，我可能在这里遗漏了一些东西。
首先，菜单按钮只允许我打开和关闭一次菜单，然后每次点击它都会自动关闭，直到我刷新页面。
其次，如果我打开移动菜单并将窗口扩大到 1080 像素的媒体查询，导航菜单就会消失，html 标记会向左浮动 250 像素，从而在菜单所在的位置留下空隙。我可以在 jQuery 中输入一个命令，当屏幕宽度超过 1080 像素时，它会自动关闭菜单并将 html 标签滑回？
Javascript：
jQuery(document).ready(function($) {
$('img.menu.button').click(function() {
$('html').animate({
'right' : "250px"}); //moves left
$('nav.header-nav').animate({
'right' : "0px"}); //moves left
$('img.menu.button').click(function() {
$('html').animate({
'right' : "0px"}); //moves right
$('nav.header-nav').animate({
'right' : "-250px" //moves right
});
});
});
});
CSS：
@media only screen
and (min-width : 0px)
and (max-width : 1080px) {
img.standard.logo {
height: 38px;
width: 342px;
}
/* RESPONSIVE NAVIGATION MENU */
img.menu.button {
position:relative;
display:block;
width:25px;
height:25px;
background-size: 100%;
}
nav.header-nav {
z-index:10;
position:fixed;
top:0px;
right:-250px;
width:250px;
height:100%;
float:right;
margin:0;
padding:0;
background-color:#1D1D1F;
list-style:none;
box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
}
标题：
<header class="header">
<!-- LOGOS -->
<a href="#">
<img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
<img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
<!-- LOGOS -->
<img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
<!-- HEADER NAVIGATION MENU -->
<nav class="header-nav">
<div class="menu-header-menu-container">
<ul id="menu-header-menu" class="menu">
<li id="menu-item-463">
<a href="#">WORK</a>
<ul class="sub-menu">
<li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
<li id="menu-item-473"><a href="#">SEASCAPES</a></li>
<li id="menu-item-478"><a href="#">MACRO</a></li>
<li id="menu-item-477"><a href="#">CITIES</a></li>
<li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
<li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
</ul>
</li>
<li id="menu-item-10"><a href="#">ABOUT</a></li>
<li id="menu-item-464"><a href="#">SHOP</a></li>
<li id="menu-item-923">
<a href="#">SOCIAL</a>
<ul class="sub-menu">
<li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
<li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
<li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
</ul>
</li>
<li id="menu-item-14"><a href="#">CONTACT</a></li>
</ul>
</div>
</nav>
</header>
【问题讨论】：
-
不确定 html 标签是什么意思？您能否添加屏幕抓取或其他可能有帮助的内容，不用担心我可以查看链接
-
你似乎有两个事件处理程序在相同的元素上做相反的事情，相互抵消？
-
嗨，西蒙，很抱歉不清楚 - 我的意思是 包含我网站中的所有 div。我已经设置了它，以便 javascript 将它与我的菜单一起推到左侧
-
@adeneo – 是的，似乎是这样。我添加这个的原因是我可以在打开菜单后关闭它。我希望能够再次单击该按钮以将其关闭。它有效，但只有一次。
-
我不完全确定我理解你的第二个问题，但如果我的回答解决了问题，请告诉我
标签： jquery css responsive-design