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 > .main-menu__submenu').removeClass('main-menu__submenu--active');            $('#menu-1').removeClass('main-menu__item--active');        }    });    function openSubMenu() {        $('#menu-1 > .main-menu__submenu').addClass('main-menu__submenu--active');        $('#menu-1').addClass('main-menu__item--active');    };    function closeSubMenu() {        $('#menu-1 > .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 > .main-menu__submenu').removeClass('main-menu__submenu--active');            $('#menu-2').removeClass('main-menu__item--active');        }    });    function openSubMenu() {        $('#menu-2 > .main-menu__submenu').addClass('main-menu__submenu--active');        $('#menu-2').addClass('main-menu__item--active');    };    function closeSubMenu() {        $('#menu-2 > .main-menu__submenu').removeClass('main-menu__submenu--active');        $('#menu-2').removeClass('main-menu__item--active');    };});
jQuery dropdown menu
javascript;jquery
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 + ' > .main-menu__submenu').toggleClass('main-menu__submenu--active', open);        $('#menu-' + id).toggleClass('main-menu__item--active', open);    }    for(var i = 1; i <= 2; i++) {        initializeMenu(i);    }});