点击事件问题Jquery后关闭汉堡菜单答案

【问题标题】：Close Hamburger Menu after click event problem Jquery点击事件问题Jquery后关闭汉堡菜单
【发布时间】：2020-09-02 21:48:41
【问题描述】：

我做了一个汉堡菜单，当我点击链接时它会关闭它。还有一个徽标，当我单击汉堡包按钮时该徽标会消失。该网页有没有汉堡菜单的移动版和台式电脑版。但我有一个问题。在桌面版上，如果我点击链接，徽标也会消失。

我知道它会这样做，因为 hamburger-close-after-click 事件会触发它。但我不知道如何更改它以使其正常工作。

jQuery 代码

const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
var mylogo = document.getElementById("myLogo");


hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link =>{
 link.classList.toggle("fade");

});
});


//logo-toggle
    $(document).ready(function(){
      $('.hamburger').click(function() {
      $('.logo-container').toggle().delay( 800 );
      });
    });
    
    
    //  hamburger-close-after-click event
    
    $( '.nav-links li a' ).on("click", function(){
      $('#hamburgerID').click();
    });

HTML Code

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<nav>
        <div class="hamburger" id="hamburgerID">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
        </nav>

        <header class="header" id="myHeader">
            
            <div class="logo-container" id="myLogo"> 
                <a href="#"><img src="./img/logo.png"  alt="logo"/> </a>
                </div>


            <nav>
                <ul class="nav-links">
                
                    <li><a class="nav-link" href="#details">DETAILS</a></li>
                    <li><a  class="nav-link" href="#description">DESCRIPTION</a></li>
                    <li><a   class="nav-link" href="#aboutus">ABOUT US</a></li>
            
                </ul>
            </nav>

图片的问题

[

【问题讨论】：

您不希望徽标在桌面上消失吗？这是你想要的吗
是的。基本上这是我的目标。

标签： html javascript css jquery

【解决方案1】：

您可以使用JQuery.toggleClass() 来添加和删除CSS 类，而不是使用JQuery.toggle()，例如：

$('.hamburger').click(function() {
      $('.logo-container').toggleClass('open');
})

然后，在 CSS 文件中，根据屏幕大小定义可见性，例如：

.logo-container { display: 'none' }
.logo-container.open { display: 'block' }

@media (min-width: 1025px) {
    .logo-container { display: 'block' }
}

（注意：您需要自己决定如何确定合适的尺寸来隐藏和显示元素。另请参见：how-to-target-desktop-tablet-and-mobile）

【讨论】：