replicating the bootstrap dropdown toggle in jquery

HTML

<ul>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="dropdowncode" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="A Collection of Code">Code</a>
  <div class="dropdown-menu" aria-labelledby="dropdowncode" style="">
    
          <a href="/list-category/code/" class="dropdown-item">List Code by Category</a>
          <a href="/list/code/" class="dropdown-item">List Code</a>
          <a href="/list-table/code/" class="dropdown-item">List Table Code</a>
          <a href="/search/code/" class="dropdown-item">Search Code</a>
          
        
    <!-- <a class="dropdown-item" href="#">Action</a> -->
  </div>
</li>
</ul>

CSS

.dropdown-menu {
 display:none;
}

Javascript

$(document).ready(function(){
 $('.dropdown-toggle').on("click", function(e){
    $('.dropdown-menu').hide();
    $(this).next('.dropdown-menu').toggle();
    e.stopPropagation();
    e.preventDefault();
 });
});