Question

我有一个使用PHP放置在页面上的菜单。当我单击菜单打开图标时，只需单击一下即可打开。但是，当我尝试关闭菜单时，需要单击两次才能关闭。我已经在下面发布了相关代码。关于堆栈溢出有一些相关的问题，但是似乎都没有解决我遇到的问题。我对此很陌生，因此我对自己的无知表示歉意。

HTML（主页）：

<section class="menu">
<?php include 'menu.htm';?>
</section>

这是menu.htm代码：

<?php 
echo '<i class="menu-button fa fa-bars"></i>
    <div class="menu-grid hidden">
      <i class="nav-jpn fas fa-globe-asia"></i>
      <i class="nav-eng fas fa-globe-americas"></i>
      <div class="nav-links">
        <a href="">Home</a>
        <a href="">About</a>
        <a href="">Projects</a>
        <a href="">Recipes</a>
        <a href="">Contact</a>
      </div>
      <i class="nav-close fas fa-times"></i>
    </div>';
?>

这是JQuery：

$(document).ready(() =>{
  // Menu
  $('.menu-button').on('click', () =>{
    $('.menu-grid').toggleClass('hidden');
  });
  $('.nav-close').on('click', () =>{
    $('.menu-grid').toggleClass('hidden')
  });
  $('.menu-grid').on('mouseout',() =>{
    $('.menu-grid').toggleClass('hidden');
  });
});

这也是CSS：

/* Drop-down nav menu */
  .menu-button{
    position: fixed;
    top: 0;
    right: 0;
    margin-top: 1rem;
    margin-right: 1rem;
    z-index: 1;
    font-size: 2rem;
    color: black;
  }
  .menu-grid{
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    display: grid;
    grid-template-columns: 5px auto auto repeat(12, [menu-col-start] 1fr) auto 5px;
    grid-template-rows: 5px auto auto 5px;
    grid-gap: 10px;
    z-index: 100;
    background-color: goldenrod;
  }
  .nav-jpn{
    grid-column:2/span 1;
    grid-row: 2;
    font-size: 2rem;
    justify-self: stretch;
  }
  .nav-eng{
    grid-column: 3 / span 1;
    grid-row: 2;
    font-size: 2rem;

  }
  .nav-close{
    grid-column: -3/ span 1;
    grid-row: 2;
    font-size: 2rem;
  }
  .nav-links{
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 1rem;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;

  }
    .nav-links a{
      font-family: "helvetica", sans-serif;
      color: goldenrod;
      background-color: black;
      font-size: 3rem;
      margin: auto;
    }

  /* Media Queries */
  @media (min-width: 600px) {
    .nav-links{
      flex-direction: row;
      justify-content: flex-start;
    }
    .nav-links a{
      font-size: 1.5rem;
      margin: 0 .5rem;
    }
    .nav-links {
      grid-column: 4 / 16;
      grid-row: 2;
    }
    .menu-grid{
      grid-template-rows: 5px auto 5px;
    }
  }

如果有人可以阐明这个问题，那就太好了。非常感谢！

Answer 1

我猜这是在您单击“导航关闭”时发生的。原因可能是，当您单击“导航关闭” toggleClass函数时，由于隐藏了“菜单网格”，它会调用“ mouseout”事件，使其再次可见。

单击时的JQuery需要两次单击加载PHP的元素

1 个答案: