Why must I click the anchor element twice for the function to run?

Why must I click the anchor element twice for the function to run?

////////////////////////// the jQuery in my nav.js file /////////////////////////////

(function($) {

$('a.toggle-menu-icon').click(function() {
$('nav.page-nav').addClass('open').toggle();
});

}(jQuery));

/////////////////////////// the HTML ////////////////////////////////////
      <div>
<nav class="page-nav top-nav" role="navigation">
<?php wp_nav_menu( array( ) ); ?>
</nav>

<a class="toggle-menu-icon toggle-main-navigation">
<span class="screen-reader-text">Toggle Main Navigation</span>
</a> 
      </div>

/////////////////////////////////////////////////////////////////////////////////

code expands the mobile drop down menu 

by adding class 'open' to nav element with class 'page-nav' 

and .toggle() removes open class when click again

replacing $ with jQuery for WordPress