javascript - 调整浏览器窗口大小时 toggleClass 触发两次

Question

我目前正在创建响应式导航。我已经设法完成并试图解决一个问题。每当我尝试调整浏览器大小时，似乎 toggleClass 似乎被触发了多次。如果刷新浏览器，它工作正常，但在调整大小后，它似乎在一次点击中触发了几次。

这是我一直在处理的代码。

JSFiddle - https://jsfiddle.net/kvpyzbxr/1/

<header>
    <ul class="navigation secondary-navigation">
       <li>
           Schools 
       </li>
       <li>
           Faculty
       </li>
       <li>
           Research 
       </li>
       <li>
           Contact Us
       </li>
    </ul>

    <ul class="navigation primary-navigation">
        <li>
            <a href="#">Programs</a> 
            <ul>
                <li><a href="#">Degree Programs</a></li>
                <li><a href="#">Master in Business Administration</a></li>
                <li><a href="#">Executive Master in Business Administration</a></li>
                <li><a href="#">Master in Entrepreneurship</a></li>
                <li><a href="#">Master of Science and Innovation and Business</a></li>
                <li><a href="#">Master in Development Management</a></li>
            </ul>
        </li>

        <li>
            <a href="#">Admissions</a>
            <ul>
                <li><a href="#">How to Apply</a></li>
                <li><a href="#">Application Form</a></li>
                <li><a href="#">Scholarship and Financial Aid</a></li>
            </ul>
        </li>

        <li>
            <a href="#">About Us</a>
            <ul>
                <li><a href="#">Why AIM</a></li>
                <li><a href="#">Leadership</a></li>
                <li><a href="#">Network and Alliances</a></li>
                <li><a href="#">Our Brand Story</a></li>
            </ul>
        </li>

        <li>
            <a href="#">News</a>
        </li>

        <li>
            <a href="#">Alumni</a>
            <ul>
                <li><a href="#">AIM Leader Magazine</a></li>
                <li><a href="#">My AIM Connect</a></li>
                <li><a href="#">Triple A Awardees</a></li>
            </ul>
        </li>

        <li>
            <a href="#">Give</a>
            <ul>
                <li><a href="#">Make A Gift</a></li>
            </ul>
        </li>
    </ul>
</header>

---

<script>

$(document).ready(function() {

    function detectMobile() {
        if ($(window).width() < 1080) {
            $('header').addClass('mobile');
            $('.secondary-navigation').insertAfter('.primary-navigation');
        }

        else {
            $('header').removeClass('mobile');
            $('.secondary-navigation').insertBefore('.primary-navigation');
        }

        $('.navigation li').on('click', function() {
            console.log('open');
            $(this).toggleClass('expand-menu');
        })
    }

    detectMobile();

    $(window).resize(function() {
        detectMobile();
    })


})


</script>

---

header {
  max-width: 1336px;
  margin: 0 auto; 
}

header .navigation {
  padding: 10px 0;
  clear: both; 
}

header .navigation li {
  padding: 10px;
  display: inline-block;
  position: relative;
  font-family: 'Arial', sans-serif;
  background-color: #272041;
  color: #fff;
  float: left; 
}

header .navigation li a {
  color: #fff; 
}

header .navigation li ul {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 30px;
  display: none; 
}

header .navigation li ul li {
  background-color: #231d39;
  color: #95939e; 
}

header .navigation li:hover ul {
  display: block; 
}

header.mobile .navigation li {
  display: block;
  float: none; 
}

header.mobile .navigation li ul {
  position: static;
  display: none;
  height: 0; 
}

header.mobile .navigation li.expand-menu ul {
  height: initial;
  display: block; 
}

Answer 1

那是因为你多次添加了点击事件。每次调用 detectMobile() 时，您都会将点击事件绑定(bind)到 $('.navigation li')。所以只要移动

$('.navigation li').on('click', function() {
     console.log('open');
     $(this).toggleClass('expand-menu');
})

在您的 detectMobile() 函数之外。