toggleClass triggering twice when resizing browser window

Question

I'm currently in the middle of creating a responsive navigation. I've managed to finish and trying to fix an issue. Whenever I tried resizing the browser, it seems the toggleClass seems to be triggering multiple times. If refresh the browser it works OK, but after resizing it seems to trigger a couple of times in one click.

Here is the code that I have been working on.

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

That's because you add the click-event several times. Every time detectMobile() is called you bind a click event to $('.navigation li') . So just move

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

outside of your detectMobile() function.