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();
    });

.logo-container,
.nav-links{
    display: flex;
}

.logo-container {
    flex: 1;
    position: relative;
    left: 5%;
}


.logo {

    font-weight: 400;
    margin: 5px;

}

.logo-container img{
    max-width: 120px;
    max-height: 120px;
}



nav {
    flex: 2;
}
.nav-links {
    justify-content: space-around;
    list-style: none;

    
}
.nav-link {
    color: var(--clr-dark);
    font-size:20px;
    text-decoration: none;
    font-weight: 600;

}

@media screen and (max-width: 768px){


        .line{
            width: 30px;
            height: 3px;
            background: var(--clr-accent);
            margin: 5px;
        }

        header{
            background: white;
        }

        nav{
            position: relative;
            
        }

        .hamburger{
            position: fixed; /*this was absolute*/
            cursor: pointer;
            right: 5%;
            top: 20%;
            transform: translate(-5%, -280%); /*this was 200 with absolute*/
            z-index: 2;
        }


        .nav-links
        {
            background-color: var(--clr-light);
        
            position: fixed;
            height: 100vh;
            width:100%;
            flex-direction: column;
            clip-path: circle(0px at 57% 10%);
            -webkit-clip-path: circle(0px at 57% 10%); 
        /*  transition: all 1s ease-out;  */
            pointer-events: none;
            text-align: center;
            z-index: 1;
        }

        .nav-links.open{
            clip-path: circle(1000px at 57% 10%);
            -webkit-clip-path: circle(1000px at 57% 10%);
            pointer-events:all;
            
        
        }

        .nav-links li{
            opacity: 0;
            
        }

        .navlinks li a{
            font-size: 25px;
            

        }

        .nav-links li:nth-child(1){
            transition: all 0.5s ease 0.2s;

        }

        .nav-links li:nth-child(2){
            transition: all 0.5s ease 0.4s;
            
        }


        .nav-links li:nth-child(3){
            transition: all 0.5s ease 0.6s;
            
        }

        li.fade{
            opacity: 1;
        }

        .nav-link {
             color: var(--clr-dark);
            font-size: 18px;
        }
    }

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

The page if I don't make the logo disappear

Answer 1

假定一切正常，除了徽标在桌面视图中切换的问题之外

只需添加一个新变量来检查移动设备，您就可以更改宽度以适合您的CSS断点：

var isMobile = window.matchMedia("(max-width: 767px)").matches ? true : false;

然后将一个if语句添加到您不想触发的事件中，如下所示：

//  hamburger-close-after-click event

$( '.nav-links li a' ).on("click", function(){
        if (isMobile) $('#hamburgerID').click();
});

不幸的是，您的代码段不能真正起作用，或者至少不能按照您的描述运行。
我仍然可以从您的描述中看到的唯一问题是，徽标在桌面视图中切换了。因此，如果代码确实可以在您的环境中正常工作，那么我不想进行过多更改。

但是根据您提供的代码，对于我理解的解决方案可能看起来像这样：

$(document).ready(function(){

  const hamburger = document.querySelector('.hamburger');
  const navLinks = document.querySelector('.nav-links');
  const links = document.querySelectorAll('.nav-links li');
  var mylogo = document.getElementById("myLogo");
  var isMobile = window.matchMedia("(max-width: 768px)").matches ? true : false;

  //set this to true or false for testing
  isMobile = true

  //  Click event for Links
  $( '.nav-links li a' ).on("click", function(){
    if (isMobile) {
      //toggle logo and burger menu
      $('.logo-container').toggle().delay( 800 );
      $('.hamburger').toggle();
    }
  });

  //Click event for menu
  $('.hamburger').on("click", function(){
    //toggle logo
    $('.logo-container').toggle().delay( 800 );
  });
})

.logo-container,
.nav-links{
    display: flex;
}

.logo-container {
    flex: 1;
    position: relative;
    left: 5%;
}


.logo {

    font-weight: 400;
    margin: 5px;

}

.logo-container img{
    max-width: 120px;
    max-height: 120px;
}



nav {
    flex: 2;
}
.nav-links {
    justify-content: space-around;
    list-style: none;

    
}
.nav-link {
    color: var(--clr-dark);
    font-size:20px;
    text-decoration: none;
    font-weight: 600;

}

@media screen and (max-width: 768px){


        .line{
            width: 30px;
            height: 3px;
            background: var(--clr-accent);
            margin: 5px;
        }

        header{
            background: white;
        }

        nav{
            position: relative;
            
        }

        .hamburger{
            position: fixed; /*this was absolute*/
            cursor: pointer;
            right: 5%;
            top: 20%;
            transform: translate(-5%, -280%); /*this was 200 with absolute*/
            z-index: 2;
        }


        .nav-links
        {
            background-color: var(--clr-light);
        
            position: fixed;
            height: 100vh;
            width:100%;
            flex-direction: column;
            clip-path: circle(0px at 57% 10%);
            -webkit-clip-path: circle(0px at 57% 10%); 
        /*  transition: all 1s ease-out;  */
            pointer-events: none;
            text-align: center;
            z-index: 1;
        }

        .nav-links.open{
            clip-path: circle(1000px at 57% 10%);
            -webkit-clip-path: circle(1000px at 57% 10%);
            pointer-events:all;
            
        
        }

        .nav-links li{
            opacity: 0;
            
        }

        .navlinks li a{
            font-size: 25px;
            

        }

        .nav-links li:nth-child(1){
            transition: all 0.5s ease 0.2s;

        }

        .nav-links li:nth-child(2){
            transition: all 0.5s ease 0.4s;
            
        }


        .nav-links li:nth-child(3){
            transition: all 0.5s ease 0.6s;
            
        }

        li.fade{
            opacity: 1;
        }

        .nav-link {
             color: var(--clr-dark);
            font-size: 18px;
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="hamburger" id="hamburgerID">
    <div class="line">Line1</div>
    <div class="line">Line2</div>
    <div class="line">Line3</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>
</header>

这基本上是：

单击链接时切换菜单和徽标
点击菜单时仅切换徽标

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

1 个答案: