Question

我还没有需要为我过去建立的相对简单的网页使用大量的javascript，但我现在正在开展一个我想要响应的学校项目。当页面低于某个宽度时，导航将替换为按钮。单击此按钮时，导航将显示在按钮下方，或者无论如何都应该显示。

为此，我首先尝试使用JQuery＆＃39; .slideDown()和.slideUp()。这些对于显示和隐藏导航功能非常有效，但是如果页面在点击后调整大小，则导航器由于某种原因没有显示出来。我开始研究这个的原因，但没有找到任何东西。如果有人对为什么这样做没有任何想法，那就太好了，但这不是我的问题所在。

然后我决定尝试手动显示和隐藏导航。这是我的代码。

＆＃13;

var displayed = false;
$("#menuImage").click(function(){
  if (displayed = false) {
    $("nav").css("display", "inline-block");
    displayed = true;
  } else {
    $("nav").css("display", "none");
    displayed = false;
  }
});
$(window).resize(function(){
  if ($(window).width >= 880) {
    $("nav").css("display", "inline-block");
  }
});

＆＃13;

nav {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<img id="menuImage" src="http://www.dragonmath.net/summer_project_2016/images/menu.png" alt="menu" />
  <nav>
    <ul id="navList">
      <li class="navListItem">
        <a class="navListItemLink" href="../">Home</a>
      </li>
      <li class="navListItem">
        <a class="activeNavListItemLink" href="">Summary</a>
      </li>
      <li class="navListItem">
        <a class="navListItemLink" href="../theme">Theme</a>
      </li>
      <li class="navListItem">
        <a class="navListItemLink" href="../medium">Relation to Other Medium</a>
      </li>
    </ul>
</nav>

＆＃13;

我如何阅读javascript：

- ＆gt;设置名为displayed的全局变量，并将其设置为false。

- ＆gt;单击图像时（我已尝试使用其他代码，这件作品肯定有效）

- ＆gt;检查显示的变量是否为假

- ＆gt;如果是，则显示导航并将设置显示为true。

我已经阅读了来自here，here和here的全局变量，而前两个问题似乎还有其他问题，而不是设置变量的位置，根据他们的代码与我的差异，我无法找到我做错的事。

因为我对javascript很陌生，所以我确信我只是犯了一个愚蠢的错误，但如果有人指出它是什么就会很棒。此外，当页面变得比响应区域大时，将display设置为inline-block的功能也不起作用。我认为这可能是一个类似的错误，但我没有幸运地追查它的原因。

其他来源： http://www.w3schools.com/jquery/jquery_css.asp http://www.w3schools.com/jquery/jquery_selectors.asp

再次感谢您提供的任何帮助！

JQuery / Javascript变量似乎没有工作

0 个答案: