jquery - 使用 jQuery 的问题列表

Question

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

我在使用此脚本时遇到了一些问题，我可能在这里遗漏了一些东西。

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

其次，如果我打开移动菜单并将窗口加宽到 1080px 处的媒体查询，导航菜单就会消失，html 标签将向左浮动 250px，在菜单所在的位置留下一个空隙。当屏幕宽度超过 1080 像素时，我可以在 jQuery 中放置一个自动关闭菜单并滑动 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>

Answer 1

我会通过为打开的导航创建一个类来简化，以便在 jQuery 中切换。设置 width: 0 而不是为 right 使用负值(这应该可以解决您的第二个问题(如果我理解正确的话)，并使用 CSS 过渡到为宽度设置动画。

全 Angular 看起来有点奇怪，但它似乎超出了你的问题范围。您可以设置 CSS 规则以使用媒体查询以您希望的方式显示它。另外，在这种情况下，我建议不要使用 jQuery 做任何响应，这似乎是不必要的。

我还在 .header-nav 元素上设置了 white-space: nowrap，这样元素就不会在切换期间改变换行。

fiddle :https://jsfiddle.net/rplittle/bjfwf2o5/

jQuery(document).ready(function($) {
  $('img.menu.button').click(function() {
    $('nav.header-nav').toggleClass('open');
  });
});

@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 {
    /* added rules */
    transition: width .5s ease-in-out;
    white-space: nowrap;
    right: 0;
    z-index: 10;
    position: fixed;
    top: 0px;
    width: 0;
    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);
  }
  nav.header-nav.open {
    /* added */
    width: 250px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>