Javascript 如果调整大小功能出现问题，则导航会在单击时打开然后关闭 问题 当页面处于全宽时，将大小调整为小于1300px，然后 点击汉堡菜单，菜单意外打开，然后 关闭。 客观的 我想能够调整页面大小，点击汉堡菜单，然后有导航切换打开，然后再次点击它将切换关闭 代码笔： scripts.js if（$（窗口）.width（）

你能试试这个代码吗

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

$（“.fa条”）。在（“单击”，函数（）{
如果（$（窗口）.width（）<1300）{
$（“.test”）.slideToggle（）；
if（$（“.test”）.hasClass（“打开”）{
$（“.test”）.removeClass（“打开”）；
}否则{
$（“.test”）.addClass（“是开放的”）；
}
}
});
$（窗口）.on（“调整大小”，函数（）{
if（$（“.test”）.hasClass（“打开”）{
$（“.test”）.removeClass（“打开”）；
$（“.test”）.hide（）；
}
如果（$（窗口）.width（）<1300）{
$（“.fa条”）。在（“单击”，函数（）{
$（“.test”）.slideToggle（）；
});
}
});

我猜发生的情况是，当页面小于

1300px

时，第一个if中的

onclick

事件，即

if（$（window）.width（）<1300）

被绑定。然后，当您调整大小时，

$（窗口）中的第二个事件。在（“resize”上，函数（）{

resize函数被绑定。
因此，一次单击，这两个事件首先打开，然后同时关闭菜单。您需要更正此问题并确保只有一个事件被绑定。在应用第二次单击之前，可以使用

$（“#foo”）。取消绑定（“单击”，处理程序）；

---

更新了你的

你是否意识到两个单击事件都将被附加，并且每次调整大小时，它们都会添加更多的事件。这些事件不会被替换。添加一个单击事件并根据宽度在内部执行逻辑。你介意共享一个代码片段吗？我添加了一个指向代码笔的链接，其中有一个工作示例：你能更好地解释你所做的吗nt要实现？因此，通常单击打开它，再次单击则关闭它。调整大小的连接如何？调整大小时会发生什么情况？请提供两种情况，如果在调整大小时菜单已打开，并且如果菜单未打开）当页面小于1300px时，单击汉堡包菜单将切换菜单打开，再次单击将切换菜单关闭。b）当菜单打开时，调整页面大小将关闭菜单c）当页面以全宽开始，然后调整大小至小于1300px，然后单击汉堡包菜单时，切换菜单打开，单击它应该再次将其关闭。您正在条件中添加事件处理程序，这是在创建问题。如果您可以创建fiddle，我将为您调试代码并修复错误。谢谢。这是指向代码笔的链接：顺便问一下，您最后更改了什么？我仍然看到一个问题。现在重试，未保存。我仍然看到它在调整大小时打开和关闭两次。是否继续你介意分享一段代码片段吗？我添加了一个指向代码笔的链接，其中有一个工作示例：CodePen.io/onlyandrewn/pen/eWVOPQ

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

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