使用 jQuery 更改导航

Question

我必须执行以下操作：我有一个带有徽标的导航，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>

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

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");
    }
  });
});

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

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

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

Answer 1

我有一个不同的方法，因为它很轻。

如果您在 CSS 中使用媒体屏幕，则无需使用 JQuery。

HTML 变化是：

<header>
  <div class="logo">
      <a href="#"><i class="fa fa-leaf" aria-hidden="true"></i></a>
  </div>
  <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="#"><i class="fa fa-leaf" aria-hidden="true"></i></a></li>
        <li class="class3">Menüpunkt</li>
        <li class="clas4">Menüpunkt</li>
    </ul>
 </nav>
</header>

和CSS变化是

* {
    margin: 0;
    padding: 0;
}
#navigation-main {
 background: red;
 text-align: center;
 padding: 50px;
}
ul li {
 display: inline;
 margin: 0 20px; 
 padding: 5px;
}
#logo a {
 background: #000;
 color: #fff;
 padding: 20px 40px;
 font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
 font-size: 50px;
}
.logo
{
 display:none;
}
@media (max-width: 1179px) {
 #navigation-main {
   display: none;
}
.logo
{
 display:block;
}
}

Answer 2

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

中有错字

"class2>"

此外，if 条件后面的块：

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)

使用 jQuery 更改导航

Change navigation with jQuery

html

javascript

css

navigation

jquery