Question

我做了一个汉堡菜单，然后单击链接将其关闭。还有一个徽标，当我单击“汉堡包”按钮时，该徽标会消失。该网页具有移动版和台式机版本，没有汉堡菜单。但是我有一个问题。在桌面版本上，如果我单击链接，徽标也将消失。

我知道这样做是因为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>

图片问题

[ Desktop version before click1

Answer 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）

单击事件问题后关闭汉堡菜单

1 个答案: