jQuery dropdown menu I wrote this jQuery code as I could for a dropdown menu.

But I'm sure there is a way to make this code shorter.

$(document).ready(function() {
    $('#show-menu-1').on('click touch', openSubMenu);
    $('#close-menu-1').on('click touch', closeSubMenu);

    $(document).on('click touch', function(event) {
        if (!$(event.target).closest('#menu-1').length) {
            $('#menu-1 &gt; .main-menu__submenu').removeClass('main-menu__submenu--active');
            $('#menu-1').removeClass('main-menu__item--active');
        }
    });

    function openSubMenu() {
        $('#menu-1 &gt; .main-menu__submenu').addClass('main-menu__submenu--active');
        $('#menu-1').addClass('main-menu__item--active');
    };

    function closeSubMenu() {
        $('#menu-1 &gt; .main-menu__submenu').removeClass('main-menu__submenu--active');
        $('#menu-1').removeClass('main-menu__item--active');
    };
});

$(document).ready(function() {
    $('#show-menu-2').on('click touch', openSubMenu);
    $('#close-menu-2').on('click touch', closeSubMenu);

    $(document).on('click touch', function(event) {
        if (!$(event.target).closest('#menu-2').length) {
            $('#menu-2 &gt; .main-menu__submenu').removeClass('main-menu__submenu--active');
            $('#menu-2').removeClass('main-menu__item--active');
        }
    });

    function openSubMenu() {
        $('#menu-2 &gt; .main-menu__submenu').addClass('main-menu__submenu--active');
        $('#menu-2').addClass('main-menu__item--active');
    };

    function closeSubMenu() {
        $('#menu-2 &gt; .main-menu__submenu').removeClass('main-menu__submenu--active');
        $('#menu-2').removeClass('main-menu__item--active');
    };
});
You can make this shorter by modifying your html to have the id in a data attribute and using classes, but this is what I have based on the info you've given.

$(function() {

    function initializeMenu(id) {
       $('#show-menu-' + id).on('click touch', function() { toggleMenu(id, true); });
       $('#close-menu-' + id).on('click touch', function() { toggleMenu(id, false); });

       $(document).on('click touch', function(event) {
            if (!$(event.target).closest('#menu-' + id).length) {
                toggleMenu(id, false);
            }
       });
    }

    function toggleMenu(id, open) {
        $('#menu-' + id + ' &gt; .main-menu__submenu').toggleClass('main-menu__submenu--active', open);
        $('#menu-' + id).toggleClass('main-menu__item--active', open);
    }

    for(var i = 1; i &lt;= 2; i++) {
        initializeMenu(i);
    }
});