I've several icons with content to reveal by clicking on each icon in my header. And when I click anywhere other than the revealed content, it closes.
Exemple :
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' );
}
});<html>
<body>
<header id="header">
<div id="menu">
<div id="menu-icon">Menu Icon</div>
<nav id="menu-wrapper">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>
</div>
<div>
...
...
</div>
<div id="icons">
<div id="whislist-header">
<div class="other-classes">
<div class="heading">Wishlist Icon</div>
<div class="list">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
<div id="quote-header">
<div class="other-classes">
<div class="raq-info">Quote Icon</div>
<div class="yith-ywraq-list-wrapper">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
<div id="cart-header">
<div class="cart-info">Cart Icon</div>
<div class="woocommerce-cart-tab-container">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>But, I've a JS error :
Uncaught TypeError: el.icon.on is not a function
How I can assign a function to all entry object ? So I think that assigning a mouseup function to each wrapper might not be the right solution.
What do you think is the right method?