Question

我正在努力解决以下代码问题。我想做的就是在页面加载时打开滑出菜单（导航容器），因为它一直隐藏，直到你点击一下打开它。我怎样才能做到这一点？

$(window).load(function() {
       $(".btn-nav").on("click tap", function() {
         $(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
         $(this).toggleClass("animated");
       });
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-nav">
    <div class="bar arrow-top-r"></div>
    <div class="bar arrow-middle-r"></div>
    <div class="bar arrow-bottom-r"></div>
    </button>
    
    <nav class="nav-container hidden hideNav">
      <ul class="nav-list">
        <li class="list-item"><a href=""><i class="fa fa-home"></i></a></li>
        <li class="list-item"><a href=""><i class="fa fa-credit-card-alt"></i></a></li>
        <li class="list-item"><a href=""><i class="fa fa-usb"></i></a></li>
        <li class="list-item"><a href=""><i class="fa fa-edge"></i></a></li>
        <li class="list-item"><a href=""><i class="fa fa-shopping-basket"></i></a></li>
      </ul>
    </nav>

Answer 1

致电click： -

$(window).load(function() {
  $(".btn-nav").on("click tap", function() {
    $(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
    $(this).toggleClass("animated");
  }).click();
});

Answer 2

选项1：触发点击事件（如上一个回答中所述）

选项2：删除点击事件

$(window).load(function() {
    $(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
    $(this).toggleClass("animated");
});

在页面加载时显示切换打开

2 个答案: