javascript - 当我使用 jQuery 代码时，我的导航栏消失了

Question

我认为我遇到了 jQuery 问题。

因此，当我使用 PC 版本的网站并单击导航栏项目(在 HTML 代码中为 #menu-two .items)时，导航栏菜单就会消失。

我有一些媒体查询来重新调整导航栏菜单，在这个媒体查询中，我希望当我单击导航栏项目时隐藏导航栏(即 .hide)，在本例中为平板电脑和移动版本。

看来电脑版在这种情况下无法与这两个版本分开，并且也隐藏了#menu-two。

 
$('.toggle').on('click', function() {
$('.toggle').toggleClass('active');
$('#menu-two').toggleClass('hide')
$('.hide').fadeToggle()
}) 

$('.active').on('click', function() {
    $('.toggle').fadeToggle()
})

$('.item').on('click', function() {
      $('.hide').fadeToggle()
})

.toggle {
  display: none;
}

a {
  text-decoration: none;
  font-family: 'Open Sans Condensed', sans-serif;
  letter-spacing: 1px;
  font-size: 20px;
  color: black
}

#menu-two {
  display: flex;
}

.hide {
  display: none;
}

li {
  list-style: none;
  padding: 1em
}

@media only screen and (max-width: 1210px) {
  #menu-two {
    display: none;
  }
  .hide {
    background-color: rgb(253, 236, 214);
    opacity: 0.95;
    position: absolute;
    width: 100%;
    top: 4rem;
    text-align: center;
  }
  .options {
    display: block;
  }
  .menu-one {
    display: flex;
    justify-content: space-between;
    width: 100%
  }
  .toggle {
    display: initial;
    padding-top: 1.5rem;
    transform: translate(-10px);
    cursor: pointer;
  }
  .toggle span {
    position: relative;
    width: 36px;
    height: 4px;
    display: block;
    background-color: black;
    margin-bottom: 8px;
    transition: 0.5s;
  }
  .toggle span:nth-child(1) {
    transform-origin: left;
  }
  .toggle span:nth-child(2) {
    transform-origin: center;
  }
  .toggle span:nth-child(3) {
    transform-origin: left;
  }
  .toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    left: 2px;
  }
  .toggle.active span:nth-child(2) {
    transform: rotate(315deg);
    right: 3px;
  }
  .toggle.active span:nth-child(3) {
    transform: scaleX(0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-one">
  <div class="toggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<ul id="menu-two" class="hide">
  <li class="item">
    <a href="./prototype.html">Home</a>
  </li>
  <li class="item" id="proj">
    <a href="./exp.html">Projects</a>
  </li>
  <li class="options">
    <a href="./Atower.html">A-Tower</a>
  </li>
  <li class="options">
    <a href="./muda.html">Muda</a>
  </li>
  <li class="item">
    <a href="#About-Me">About</a>
  </li>
  <li class="item">
    <a href="#Contact">Contact</a>
  </li>
</ul>

问题是当我使用这个 jQuery 代码时，它不仅在我的媒体查询中起作用，而且也在它之外起作用，所以我的导航栏在 PC 版本中隐藏，即使我有一个 display: none 在 .hide 类中。

我应该做什么？

Answer 1

使用 jQuery 的 fadeToggle 将样式内联添加到元素中，which takes precedence over stylesheet styles 。这就是您的媒体查询被忽略的原因。如果您只想在某些媒体查询中淡出，您可以切换一个类并向该类添加相关样式。例如:

JS

$('.item').on('click', function() {
    $('.hide').toggleClass('hidden');
    ...

CSS

@media only screen and (max-width: 1210px) {
  .hide {
    transition: opacity 0.2s;
  }

  .hide.hidden {
    opacity: 0;
    pointer-events: none;
  }
}

如果您需要将元素设置为 display: none (例如，这样它就不会向下推其他元素)，您可以在以下位置使用 setTimeout您的 jQuery 代码，以便将元素设置为在动画完成后隐藏，或在动画再次开始之前显示。