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

Question

我创建了一个响应性的导航条设计，一开始似乎很好，但我偶然发现了一个奇怪的bug，当您按下移动视图中的汉堡包菜单图标并将视图升级到大断点时，它会改变ul元素的可见性。你可以在这支笔中找到它。

这是它背后的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");
});

根据菜单的状态，此错误的工作方式不同。如果你再把它藏起来，调整窗口的大小，李门就不会出现了。如果将其打开，则它们的显示属性将保持为“块”。

我尝试为桌面brekpoint创建"display: flex;“规则，但是它做不到这一点。我希望你能帮我找到解决办法。

Answer 1

您只需使.links类display:flex;变得重要，如下所示：

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

这是因为在移动版本中，你用JQuery设置了指向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");
});

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>

​