JQuery – назначить функцию для объекта записи foreach ⇐ Jquery

[Anonymous]

У меня есть несколько значков с содержимым, которое можно открыть, щелкнув каждый значок в заголовке.
И когда я нажимаю в любом месте, кроме отображаемого содержимого, оно закрывается.
Пример:

Код: Выделить всё

jQuery(document).ready(function($) {

const header = {
menu: {
icon: '#menu > #menu-icon',
wrapper: '#menu > #menu-wrapper',
},
wishlist: {
icon: '#wishlist-header .heading',
wrapper: '#wishlist-header .list',
},
quote: {
icon: '#quote-header .raq-info',
wrapper: '#quote-header .yith-ywraq-list-wrapper',
},
cart: {
icon: '#cart-header .cart-info',
wrapper: '#cart-header .woocommerce-cart-tab-container',
}
};

$.each( header, ( f, el ) => {
el.icon.on( 'click', () => {
open_it( el );
});
});

$( document ).mouseup( function( e ) {

$.each( header, ( f, el ) => {
if ( ! el.wrapper.is( e.target ) && el.wrapper.has( e.target ).length === 0 && el.wrapper.hasClass( 'open' ) ) {
close_it( el );
}
});
});

function close_it( el ) {
$( el.icon, el.wrapper ).removeClass( 'open' );
$( '#header' ).removeClass( 'header-is-open' );
}
function open_it( el ) {
$( el.icon, el.wrapper ).addClass( 'open' );
$( '#header' ).addClass( 'header-is-open' );
}

});

Код: Выделить всё

Menu Icon

[list]
[*]...
[*]...
[*]...
[/list]



...
...



Wishlist Icon

[list]
[*]...
[*]...
[*]...
[/list]





Quote Icon

[list]
[*]...
[*]...
[*]...
[/list]




Cart Icon

[list]
[*]...
[*]...
[*]...
[/list]

Но у меня ошибка JS:

Необнаруженная ошибка типа: el.icon.on не является функцией

Как назначить функцию все объекты ввода?
Поэтому я думаю, что назначение функции mouseup для каждой оболочки возможно, это не правильное решение.
Как вы думаете, какой метод правильный?

Подробнее здесь: https://stackoverflow.com/questions/718 ... try-object