jquery - 媒体查询和 jquery ".slideToggle()"在调整大小时更改 li 元素的可见性

Question

我创建了一个响应式导航栏设计，起初似乎运行良好，但我偶然发现了这个奇怪的错误，一旦您在移动 View 中按下汉堡菜单图标并将视口(viewport)放大到大断点。您可以在 this pen 中找到它.

这是它背后的 javascript (JQuery):

"use strict";
$("#one").click(function(event) {
 $("#dropdown-1").slideToggle();
 $("#dropdown-2").slideUp();
 $("#dropdown-3").slideUp();
 event.stopPropagation();
});

$("#two").click(function(event) {
 $("#dropdown-2").slideToggle();
 $("#dropdown-1").slideUp();
 $("#dropdown-3").slideUp();
event.stopPropagation();
});

$("#three").click(function(event) {
 $("#dropdown-3").slideToggle();
 $("#dropdown-1").slideUp();
 $("#dropdown-2").slideUp();
 event.stopPropagation();
});

$('html').click(function() {
 $("#dropdown-1").slideUp();
 $("#dropdown-2").slideUp();
 $("#dropdown-3").slideUp();
});

$('#navicon').click(function() {
 $("#links").slideToggle();
 $("#social").slideToggle();
 $("#social").css("display", "flex");
});

此错误根据菜单的状态而有所不同。如果您再次隐藏它并调整窗口大小，这些元素将不会出现。如果您将其保持打开状态，它们的显示属性将保持“阻塞”状态。

我尝试创建“display: flex;”桌面断点的规则，但它不会完成这项工作。我希望你能帮我找到解决方案。

Answer 1

你只需要让你的 .links 类 display:flex; 变得重要，如下所示:

@media screen and (min-width: 768px) {
  #links,
  #lang,
  #main-nav {
    display: flex !important;
  }
}

这是因为在移动版本中，您使用 JQuery 将链接设置为 display:block; 并且使用 > 768 破坏了您的设计，

请参阅下面的工作片段:

"use strict";

$("#one").click(function(event) {
    $("#dropdown-1").slideToggle();
    $("#dropdown-2").slideUp();
    $("#dropdown-3").slideUp();
    event.stopPropagation();
});

$("#two").click(function(event) {
    $("#dropdown-2").slideToggle();
    $("#dropdown-1").slideUp();
    $("#dropdown-3").slideUp();
    event.stopPropagation();
});

$("#three").click(function(event) {
    $("#dropdown-3").slideToggle();
    $("#dropdown-1").slideUp();
    $("#dropdown-2").slideUp();
    event.stopPropagation();
});

$('html').click(function() {
    $("#dropdown-1").slideUp();
    $("#dropdown-2").slideUp();
    $("#dropdown-3").slideUp();
});

$('#navicon').click(function() {
    $("#links").slideToggle();
    $("#social").slideToggle();
    $("#social").css("display", "flex");
});

body {
  font-family: sans-serif;
  background-color: #333;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

nav {
  background-color: #111;
  position: absolute;
  width: 100%;
  padding-top: 4px;
}

#main-nav {
  display: flex;
}

.brand {
  margin-left: 4px;
}

ul {
  list-style-type: none;
  padding: 0;
}

#links {
  display: flex;
  width: 100%;
}

#links li {
  text-align: center;
  flex-basis: 15vw;
  margin: auto 1vw;
}

#social {
  display: flex;
}

#social li {
  margin: auto 1.2vw;
}

nav a {
  color: #aaa;
  font-size: 1.1em;
}

nav a:hover {
  color: #fff;
}

.caret {
  font-size: 0.8rem;
}

.dropdown {
  position: absolute;
  background-color: #111;
  text-align: center;
  width: 15vw;
  border-radius: 3%;
  margin-top: 1vh;
  display: none;
}

.dropdown li {
  border-top: 1px solid #777777;
  border-radius: 2%;
  padding-top: 1vh;
  padding-bottom: 1vh;
}

#navicon {
  margin: auto 2vw auto 1vw;
  font-size: 2.5em;
  display: none;
  background-color: transparent;
  color: #fff;
  border: none;
}

@media screen and (max-width: 768px) {
  #social,
  #links,
  .dropdown a {
    font-size: 0.9em;
  }

  #social li {
    margin: auto 1.8vw;
  }

  #social,
  #links,
  #dropdown {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #social,
  #links,
  .dropdown {
    width: 100%;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    display: none;
  }

  #navicon {
    display: flex;
  }

  #main-nav {
    justify-content: space-between;
    flex-wrap: wrap;
    flex-basis: 100vw;
  }

  #links li {
    flex-basis: 100vw;
    margin: 1em auto;
    border: 1px solid transparent;
    font-size: 1.3em;
  }

  #social li {
    font-size: 1.5em;
    padding-left: 1em;
  }

  .main-link {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 768px) {
  #links,
  #lang,
  #main-nav {
    display: flex !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<nav>
  <div id="main-nav">
    <a href="index.html" class="brand"><img src="img/logo/logo.png" alt="Logo" /></a>
    <button id="navicon" aria-label="menu"><i class="fa fa-bars" aria-hidden="true"></i></button>
    <ul id="links">
      <li><a href="javascript:void(0)" id="one" class="main-link">Header <span class="caret">&#9660;</span></a>
        <ul class="dropdown" id="dropdown-1">
          <li><a href="#">Element</a></li>
          <li><a href="#">Element</a></li>
          <li><a href="#">Element</a></li>
          <li><a href="#">Element</a></li>
          <li><a href="#">Element</a></li>
          <li><a href="#">Element</a></li>
        </ul>
      </li>
      <li><a href="#" class="main-link">Element</a></li>
      <li><a href="javascript:void(0)" id = "two" class="main-link">Header <span class="caret">&#9660;</span></a>
        <ul class="dropdown" id="dropdown-2">
          <li><a href="#">Element</a></li>
          <li><a href="#">Element</a></li>
        </ul>
      </li>
      <li><a href="javascript:void(0)" id="three" class="main-link">Header <span class="caret">&#9660;</span></a>
        <ul class="dropdown" id="dropdown-3">
          <li><a href="#">Element</a></li>
          <li><a href="#">Element</a></li>
          <li><a href="#">Element</a></li>
          <li><a href="#">Element</a></li>
        </ul>
      </li>
    </ul>

    <ul id="social">
      <li id="youtube"><a aria-label="youtube_channel" href="https://www.youtube.com/" target="_blank" rel="noopener"><i class="fa fa-youtube-play fa-lg"></i></a></li>
      <li id="facebook"><a aria-label="facebook_page" href="https://www.facebook.com/" target="_blank" rel="noopener"><i class="fa fa-facebook-official fa-lg"></i></a></li>
    </ul>
  </div>
</nav>