我的汉堡包菜单在点击它的项目时消失了

Question

最近，我把我的网站上传到了Github上，结果出现了一些显示问题。

我有一个汉堡包菜单图标(在我的代码中是.toggle)，宽度小于1210px。当我单击图标时，它可以正常工作，显示带有项目的子菜单，但当我单击主页按钮时，主页将失去菜单图标。我不知道为什么。

我之前已经测试过了，在它公开之前，它工作得很好。

同样的事情发生在我点击a塔或muda项目，然后返回主页时，图标再次消失。

我已经尝试过详细研究这个错误，但没有找到一个特别相似的错误。

html：

    <div class="header">
        <div class="menu-one">
            <div class="logo">
                <img src=".\logo_final.png">
                <div class="lettering">
                    <h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
                </div>
            </div>
            <div class= "toggle">
                <span></span>
                <span></span>
                <span></span> 
            </div>
        </div>
        <ul id="menu-two" class="hide">
            <li class="item">
                <a href="./index.html" >Home</a> 
            </li>
            <li class="item" id="proj">
                <a href="#projects">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>
    </div>

css：

.header {
background-color: rgb(235, 223, 201);
z-index: 100;
top: 0px;
margin: 0 auto;
max-height: 5rem;
position: fixed;
border-bottom-style: double;
display: flex;
justify-content: space-between;
width: 100%
}

.menu-one {
display: flex
}

.logo {
display: flex;
}

.logo img { 
height: 100%
}

.lettering  {
display: flex;
justify-content: center;
align-items: flex-end;
padding-left: 1%;
}

h6 {
margin-bottom: 1.7%;
font-family: 'calibri';
font-weight: lighter;
letter-spacing: 0.1em;
font-size: 0.8em;
}

h6 .bolder {
font-weight: bold;
}

h6 .smaller {
font-weight: lighter;
}

.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: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
  }

#proj {
    display: none;
}

#menu-two.visible {
    opacity: 0.9;
    pointer-events: auto;
}

.hide {
    background-color: rgb(245, 243, 229);
    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);
}

}

js：

$(document).ready(() => {
$('.toggle, .item').on('click', function() {
    $('.toggle').toggleClass('active');
    $('#menu-two').toggleClass('visible')
}) 

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

})

注意:当我在我的桌面上调整浏览器的大小时，当它变小时，在870px和560px之间，菜单burguer停留在右边，并且在这些尺寸期间消失。

Answer 1

我已经检查过你的网站，这不是jquery的问题。由于标识属性"flex“，汉堡包图标消失。

在您的样式表中替换此CSS，我将修复您的问题。

.logo { display: flex; flex: 1; }

当您的汉堡菜单出现时，它具有CSS display: block属性，因此它无法对抗display: flex。

请让我知道。

Answer 2

这里发生了几件事。首先，一些链接会将您重定向到一个没有标题代码的新页面。其次，将第一个单击事件设置为响应.toggle和.item。.item引用了您的菜单项，因此您希望删除该目标。

​

$(document).ready(() => {
  $('.toggle').on('click', function() {
    $('.toggle').toggleClass('active');
    $('#menu-two').toggleClass('visible')
  })

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


   $('ul#menu-two > li > a').click(function(e){
      e.preventDefault();
   });
});

@media only screen and (max-width: 1210px) {
  #menu-two {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
  }
  #proj {
    display: none;
  }
  #menu-two.visible {
    opacity: 0.9;
    pointer-events: auto;
  }
  .hide {
    background-color: rgb(245, 243, 229);
    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="header">
  <div class="menu-one">
    <div class="logo">
      <img src=".\logo_final.png">
      <div class="lettering">
        <h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
      </div>
    </div>
    <div class="toggle">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <ul id="menu-two" class="hide">
    <li class="item">
      <a href="./index.html">Home</a>
    </li>
    <li class="item" id="proj">
      <a href="#projects">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>
</div>

​