我的汉堡包菜单在单击时消失

Question

最近我在Github上在线上传了我的网站，但出现了一些显示问题。

我有一个Hamburguer菜单图标（在我的代码中为.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>