我怎麼能扭轉這個功能？

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();