Здравствуйте! Имеется выпадающее горизонтальное меню на сайте которое открывается и закрывается по клику, вот скрипт:
$(function() {
/* Открывание */
$('.cat-menu-btn').live('click', function () {
$(this).parents('.nav').find('.cat-menu-list').toggle();
return false;
});
$('.cat-menu-btn1').live('click', function () {
$(this).parents('.nav').find('.cat-menu-list1').toggle();
return false;
});
/* Меню */
$('.wrap > .nav-btn').live('click', function () {
$(this).parents('.wrap').find('.nav').toggle();
return false;
});
/* Закрытие */
$(document).on('click', function(e) {
if (!$(e.target).parents().hasClass('header>wrap')) {
$('.cat-menu-list').hide();
}
if (!$(e.target).parents().hasClass('header>wrap')) {
$('.cat-menu-list1').hide();
}
});
});
Вот в чем проблема если сделать больше вкладок .cat-menu-btn2, .cat-menu-btn3 и т.д то при открытие они просто накладываются друг на друга беграундом если стоят рядом и смотрится совсем не красиво. Можно ли сделать что бы меню .cat-menu-btn закрывалось при нажатие на другое меню .cat-menu-btn1 и т.д. или при нажатие на другой <div>. Или закрывалось при покидание элеманта .cat-menu-list мышкой. Может есть еще какие нибудь варианты просто если сделать hover на css при просмотре на мониторе смотрится отлично, но при работе на мобильных устройствах это не удобно.