调整大小功能的问题，导航打开然后单击关闭

Question

问题

• 当页面为全宽时，调整为小于1300px然后 单击汉堡包菜单，菜单意外打开然后 关闭。

目的

• 我希望能够调整页面大小，点击汉堡包菜单，然后打开导航切换按钮，然后再次点击它将切换它。

CodePen：https://codepen.io/onlyandrewn/pen/eWVOPQ

scripts.js中

  if ($(window).width() < 1300) {
    $(".fa-bars").on("click", function(){
      $(".test").slideToggle();

      if ($(".test").hasClass("is-open")) {
        $(".test").removeClass("is-open");
      } else {
        $(".test").addClass("is-open");
      }
    });
  }

  $(window).on("resize", function(){
      if ($(".test").hasClass("is-open")) {
        $(".test").removeClass("is-open");
        $(".test").hide();
      }

      if ($(window).width() < 1300) {
        $(".fa-bars").on("click", function(){
          $(".test").slideToggle();
        });
      }
  });

的index.html

<nav id="top">
    <div class="nav__title">
        <a href="/schools/" class="link--title"><h1>School Guide</h1></a>
    </div>

    <div class="nav__wrapper">
        <div class="nav__list--wrapper">

            <div class="nav__hamburger">
                <i class="fa fa-bars" aria-hidden="true"></i>

                <ul class="test">
                    <a href="/schools/about" class="dropdown--list-item"><li>About</li></a>
                    <a href="/schools/all-schools"><li class="item-schools">Schools</li></a>
                    <ul class="inner-text inner-school">
                        <a href="/schools/search/?school_type=Elementary&county=none&distance=" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> Elementary</li></a>
                        <a href="/schools/search/?school_type=Middle&county=none&distance=" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> Middle</li></a>
                        <a href="/schools/search/?school_type=High&county=none&distance=" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> High</li></a>
                    </ul>

                    <a href="/schools/all-districts" class="dropdown--list-item"><li>Districts</li></a>
                    <li>MAP Scores</li>
                    <ul class="inner-text">
                        <a href="/schools/school-map-scores/" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> By school</li></a>
                        <a href="/schools/district-map-scores/" class="dropdown--list-item"><li><i class="fa fa-caret-right" aria-hidden="true"></i> By district</li></a>
                    </ul>

                </ul>
            </div>

            <ul class="nav__list">
                <a href="/schools/about/" class="nav__link"><li class="nav__item item--about">About</li></a>
                <li class="nav__item item--schools">Schools
                    <i class="fa fa-angle-down" aria-hidden="true"></i>

                    <ul class="nav__dropdown dropdown--schools">
                        <div class="triangle triangle-schools"></div>
                        <a href="/results.html?filter=elementary" class="dropdown--list-item"><li>Elementary</li></a>
                        <a href="/results.html?filter=middle" class="dropdown--list-item"><li>Middle</li></a>
                        <a href="/results.html?filter=high" class="dropdown--list-item"><li>High</li></a>
                    </ul>
                </li>

                <a href="/schools/all-districts/" class="nav__link"><li class="nav__item item--districts">Districts</li></a>
                <li class="nav__item item--map">MAP Scores
                    <i class="fa fa-angle-down" aria-hidden="true"></i>

                    <ul class="nav__dropdown dropdown--districts">
                        <div class="triangle triangle-map"></div>
                        <a href="/schools/school-map-scores/"><li>By school</li></a>
                        <a href="/schools/district-map-scores/"><li>By district</li></a>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="nav__social">
            <div class="nav__icons">
                <a href="" class="link--nav link--facebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                <a href="" class="link--nav link--twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                <a href="" class="link--nav link--envelope" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
</nav>

Answer 1

我猜测正在发生的事情是，当您的网页小于 $(".fa-bars").on("click", function(){ if ($(window).width() < 1300) { $(".test").slideToggle(); if ($(".test").hasClass("is-open")) { $(".test").removeClass("is-open"); } else { $(".test").addClass("is-open"); } } }); $(window).on("resize", function(){ if ($(".test").hasClass("is-open")) { $(".test").removeClass("is-open"); $(".test").hide(); } if ($(window).width() < 1300) { $(".fa-bars").on("click", function(){ $(".test").slideToggle(); }); } }); 时，第一个1300px中的onclick事件会被if ($(window).width() < 1300)绑定。然后，当您调整大小时，$(window).on("resize", function(){调整大小函数中的第二个事件将被绑定 因此，只需单击一下，这两个事件首先打开，然后同时关闭菜单。您需要更正此问题并确保仅绑定一个事件。在使用unbind。

应用第二次点击之前，可能会$( "#foo" ).unbind( "click", handler );点击其中一次

更新了您的pen

Answer 2

你可以试试这段代码吗？

@HostListener('input', ['$event'])