javascript - 使用 jQuery 更改导航

Question

我必须执行以下操作:我有一个带有 Logo 的导航，HTML 如下所示:

<nav id="navigation-main">
   <ul class="level_1 inside">
    <li class="class1">Menüpunkt</li>
    <li class="class2>">Menüpunkt</li>
    <li id="logo"><a href="#">Logo</a></li>        
    <li class="class3">Menüpunkt</li>
    <li class="clas4">Menüpunkt</li>
  </ul>
</nav>

在移动设备上， Logo 应该永久显示在网站上而不是导航中，所以我将它与 jQuery 放在导航之外。在移除时它应该出现回来。但是删除应该只出现，当 Logo 从我的导航中删除时:

var bildschirmbreite = $(window).width();
  if (bildschirmbreite <= 1180) {
    $("#logo a").appendTo("header").addClass("logo");
    $("#logo").remove();
  }  
  $(window).resize(function() {
    var bildschirmbreite = $(window).width();
    if (bildschirmbreite <= 1180) {
        $("#logo a").appendTo("header").addClass("logo");
        $("#logo").remove();
        var resized = 1;
    }  
    if (bildschirmbreite >= 1180 && resized === 1) {
        $("#navigation-main .class2").after('<li id="logo"></li>');
        $(".logo").appendTo("#logo");
        $("#navigation-main").removeAttr("style");
    }
  });
});

至少我有一些问题:它看起来只是，当 resized-check 没有出现在最后一个 if 中时。但是每次调整大小事件都会将 a 放在 .class2 之后。如果我有 resize-chek 和 if，标志不会变回来。

所以我的问题是:我的代码有什么问题，我必须做什么才能正确显示？

这是 Codepen 上的一个例子:http://codepen.io/Sukrams/pen/RRZWKO

Answer 1

好的，您的代码有以下问题:

有错字

"class2>"

此外，if 条件之后的 block :

if (bildschirmbreite >= 1180 && resized === 1)

它永远不会被执行，因为 resized 总是被识别为“undefined”(尝试用 Chrome 调试这段代码)。要解决此问题，请更改以下行:

....
var resized = 1;
} 
if (bildschirmbreite >= 1180 && resized === 1)

到

....
window.resized = 1;
} 
if (bildschirmbreite >= 1180 && window.resized === 1)