使用jQuery的问题列表

我正在我的Wordpress网站上为响应式移动导航编写jQuery脚本。我将其设置为使导航菜单位于右侧，当我单击按钮时，它向左滑动，html标记随之移动

这个脚本有一些问题，我可能遗漏了一些东西

首先，菜单按钮只允许我打开和关闭菜单一次，然后每次我点击它时它就会自动关闭，直到我刷新页面

第二，如果我打开手机菜单，并以1080px的速度通过媒体查询扩大窗口，导航菜单将消失，html标记将以250px的速度向左浮动，在菜单所在的位置留下一个间隙。我是否可以在jQuery中输入一个命令，当屏幕宽度超过1080px时，该命令将自动关闭菜单并将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:

标题：

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

我将通过为打开的导航创建一个类来简化，该类将在jQuery中切换。设置

width:0

，而不是为

right

使用负值（这应该可以解决第二个问题（如果我理解正确的话），并使用CSS转换来设置宽度动画

整个宽度看起来有点奇怪，但似乎超出了您的问题范围。您可以设置CSS规则，以便在媒体查询中按您的意愿显示它。此外，我建议不要使用jQuery执行任何响应性操作，在这种情况下，这似乎是不必要的

我还在.header nav元素上设置了

空白：nowrap

，这样这些元素在切换过程中不会改变换行

小提琴：

jQuery（文档）.ready（函数（$）{
$（'img.menu.button'）。单击（函数（）{
$（'nav.header nav'）.toggleClass（'open'）；
});
})；

@仅媒体屏幕和（最小宽度：0px）和（最大宽度：1080px）{
img.standard.logo{
高度：38px；
宽度：342px；
}
/*响应导航菜单*/
菜单按钮{
位置：相对位置；
显示：块；
宽度：25px；
高度：25px；
背景大小：100%；
}
导航头-导航{
/*新增规则*/
过渡：宽度。5s易于进出；
空白：nowrap；
右：0；
z指数：10；
位置：固定；
顶部：0px；
宽度：0；
身高：100%；
浮动：对；
保证金：0；
填充：0；
背景色：#1D；
列表样式：无；
盒影：0 10px 20px rgba（0,0,0,0.05），0 4px 6px rgba（0,0,0,0.1）；
}
导航头-导航打开{
/*增加*/
宽度：250px；
}
}

我会将u pa css类设置为使用jQuery toggle类方法。首先，我不会使用html部分，我会添加一个主容器div来控制站点等

以下是指向工作版本的更深入链接：

JS

---

不知道你说的html标签是什么意思？你能添加一个屏幕抓图或一些可能更有用的东西吗，不用担心我可以查看链接你似乎在同一元素上有两个事件处理程序，它们做相反的事情，相互抵消？嗨，西蒙，很抱歉不清楚-我是说包含我网站中所有div的。我已经将其设置为javascript将它推到左边，还有我的menu@adeneo–是的，似乎是这样。我添加此选项的原因是为了在打开菜单后可以关闭它。我希望能够再次单击按钮关闭它。它可以工作，但只能工作一次。我不完全确定我是否理解您的第二个问题，但如果我的答案解决了，请告诉我我是Simon，我不能让它工作，但是它在控制台中没有显示任何错误。我在页眉中的后面和页脚中的前面添加了主容器div，现在没有使用min容器。你也在主容器css中添加了内容。例如：position:relative；我想我有managed来实现这一点——唯一的问题是过渡CSS似乎没有任何效果，所以nav菜单和conta

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

<div class="menu-wrapper">
  <a href="">link</a>
</div>

<div class="main-container">
  <header>Hello
    <button id="menu-btn">MENU</button>
  </header>
</div>

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

.main-container {
  position: absolute;
  right:0;
  width: 100%;
  max-width:100%;
  height: auto;
  background: grey;
  transition: all 800ms;
}

header {
  margin: 0;
  padding: 10px 0px;
  width: 100%;
  max-width: 100%;
  postion: relative;
  height:40px;
 }
#menu-btn {
   padding: 5px 8px;;
  position: relative;
  right: 10px;
  top: 2px;
  float: right;
  border: 0;
  border-radius: 4px;
  height: 30px;
  cursor: pointer;
  transition: background 800ms, color 800ms;
}
#menu-btn:hover {
  background: white;
  color: black;
 }
.menu-wrapper {
  position: absolute;
  top: 0; 
  right: -250px;
  bottom: 0;
  width: 250px;
  background: red;
  z-index:2000;
  transition: all 800ms;
}
.main-container.open {
  right: 250px;
}
.menu-wrapper.open {
  right: 0;
}

$('#menu-btn').on('click', function(evt){
   evt.preventDefault();
   $('.main-container,.menu-wrapper').toggleClass('open');
 })

//-- check for browser resize
$(window).resize(function() {
  var scrWidth = $(window).width();
  //-- lets remvoe class if screen goes beyond mobile with
  if(scrWidth > 1080) {
      $('.main-container,.menu-wrapper').removeClass('open');
  }

 });