打开另一个菜单

Question

我对JS下拉菜单有疑问。 我有多个菜单按钮，每个都有子菜单。不幸的是，一旦我打开菜单，即使我点击其他菜单按钮并且它们在视觉上重叠，它也会保持打开状态。 我在这里尝试了不同的解决方案，但显然我做错了什么。 这就是我所拥有的：

   $( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a, .widget_nav_menu .page_item_has_children > a, .widget_nav_menu .menu-item-has-children > a' ).append( '<button class="dropdown-toggle" aria-expanded="false"/>' );
$( '.dropdown-toggle' ).click( function( event ) {
    event.preventDefault();
    $( this ).toggleClass( 'toggle-on' );
    $( this ).parent().next( '.children, .sub-menu' ).toggleClass( 'toggle-on' );
    $( this ).attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
} );

和

jQuery(document).ready(function($){
    $(window).resize(function(){
         var socialHeight = $('.social-icons').outerHeight();
         $('.social-icons').css('margin-top',-(socialHeight/2));
    }).resize();
});

感谢任何建议！