我怎么能扭转这个功能？

Question

如何反转以下功能的工作方式？目前，导航栏已打开，如果用户点击<a>标签，则会关闭。

我真正想要的是nav最初是关闭的，只有当用户点击<a>标签时才会打开。

(function($){ 
    $(document).ready(function(){ 
     $('#main_nav li.active').addClass('open').children('ul').show(); 
     $('#main_nav li.has_sub>a').on('click', function(){ 
      $(this).removeAttr('href'); 
      var element = $(this).parent('li'); 
      if (element.hasClass('open')) { 
       element.removeClass('open'); 
       element.find('li').removeClass('open'); 
       element.find('ul').slideUp(200); 
      } else { 
       element.addClass('open'); 
       element.children('ul').slideDown(200); 
       element.siblings('li').children('ul').slideUp(200); 
       element.siblings('li').removeClass('open'); 
       element.siblings('li').find('li').removeClass('open'); 
       element.siblings('li').find('ul').slideUp(200); 
      } 
     }); 
    }); 
})(jQuery); 


//HTML CODE 

<div id='main_nav'> 
<ul> 
<li class='active'><a href='index.html'>Home</a></li> 
<li class='has-sub'><a href='#'>Products</a> 
    <ul> 
    <li class='has-sub'><a href='#'>Product 1</a> 
     <ul> 
      <li><a href='#'>Sub Item</a></li> 
      <li><a href='#'>Sub Item</a></li> 
     </ul> 
    </li> 
    <li class='has-sub'><a href='#'>Product 2</a> 
     <ul> 
      <li><a href='#'>Sub Item</a></li> 
      <li><a href='#'>Sub Item</a></li> 
     </ul> 
    </li> 
    </ul> 
</li> 
<li><a href='#'>About</a></li> 
<li><a href='#'>Contact</a></li> 
</ul> 
    </div> 

Answer 1

对我来说，它看起来像代码已经做到了这两个。如果再次点击该按钮，导航栏会重新打开，对吧？

如果是这种情况，那么只需注释掉或删除该函数中的第一行代码，即在页面第一次加载时打开导航菜单。

// $('#main_nav li.active').addClass('open').children('ul').show();