jQuery: If else on click for mobile menu

Question

Currently having a problem with my burger menu in WP. As of now, it's opening immediately when loading. It's supposed to open only when it's clicked.

HTML

<div id="et-top-navigation" data-height="66" data-fixed-height="55" style="padding-left: 180px;">
     <nav id="top-menu-nav"></nav>
     <div id="et_mobile_nav_menu">
    <div class="mobile_nav closed">
         <span class="mobile_menu_bar mobile_menu_bar_toggle">::before</span>
         <ul id="mobile_menu" class="et_mobile_menu">*all li is here**</ul>
        </div>
     </div>
</div>

and my jQuery

jQuery("span.mobile_menu_bar.mobile_menu_bar_toggle").click(function(){
    var $this = jQuery(this);
    if($this.data('clicked')){
        jQuery("ul#mobile_menu").css({"display": "flex", "flex-direction": "column"});
        jQuery("ul#mobile_menu > li").css("order", "2");
        jQuery("ul#mobile_menu > .early-access-1").css("order", "1");
        jQuery("ul#mobile_menu > .early-access-2").css("order", "1");
    } else {
        jQuery("#mobile_menu").css("display", "none");
        jQuery("#mobile_menu").css("important");
    }

});

Answer 1

js

//disable menu with js
//use only if you keep opening on your own. but it's probably something else that is conflicting
jQuery("#mobile_menu").css("display", "none");
jQuery("#mobile_menu").css("important");

//correct code
jQuery("span.mobile_menu_bar.mobile_menu_bar_toggle").click(function(){
    var $this = jQuery(this);
    console.log($this.data('clicked'));
    if( typeof $this.data('clicked') === 'undefined' ){
        $this.data('clicked', true);
    }else{
        $this.removeData('clicked');
    }

    if($this.data('clicked')){
        jQuery("ul#mobile_menu").css({"display": "flex", "flex-direction": "column"});
        jQuery("ul#mobile_menu > li").css("order", "2");
        jQuery("ul#mobile_menu > .early-access-1").css("order", "1");
        jQuery("ul#mobile_menu > .early-access-2").css("order", "1");
    } else {
        jQuery("#mobile_menu").css("display", "none");
        jQuery("#mobile_menu").css("important");
    }

});

css default

#mobile_menu{
    display: none;
}