закрытие меню вне блока
Сделал для мобильной версии сайта два меню.
Также создал блок (back) который делает затемнение фона при открытии одного из меню. Переключение между блоками меню реализовал с помощью кода:
$(document).ready(function(){
var back = $('.back');
$.fn.oldtoggle = function () {
var b = arguments;
return this.each(function (i, el) {
a = function () {
var c = 0;
return function () {
b[c++ % b.length].apply(el, arguments)
}
}();
$(el).click(a)
})
};
function func1() {
var $next = $(this).next('nav.menu')
$('nav.menu:visible').not($next).prev().click();
$next.fadeIn(); back.slideToggle(0);};
function func2() {$(this).next('nav.menu').fadeOut(); back.slideToggle(0);};
$('a.mobile-menu').oldtoggle(func1, func2);
});
Как сделать чтобы при клике вне меню оно закрывалось? Делал так:
$(document).mouseup(function (e) {
var container = $("nav.menu");
if (container.has(e.target).length === 0){
container.hide();
}
});
Но совсем не то что хотелось бы. |
makcim_tol,
минимальный макет хорошо бы и что не так в container.hide();? возможно нужно $('a.mobile-menu').click() вместо этого |
вот минимальный макет:
<div class="back"></div> <a id="touch-menu" class="mobile-menu" href="#"><i class="icon-paragraph-left"></i></a> <nav class="menu"> <ul> <li></li> <li></li> </ul> </nav> <a id="touch-menu-dom" class="mobile-menu" href="#"><i class="icon-paragraph-right"></i></a> <nav class="menu"> <ul> <li></li> <li></li> </ul> </nav> |
makcim_tol,
ок ... снова открывашка ... |
makcim_tol,
Открывашка 246 открыть закрыть по ссылке по крестику и вне блока
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.menu, .back{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var div = $(".menu"),
a = $(".mobile-menu"),
b = $(".back");
$(document).on("click", function(event) {
var el = $(event.target);
if (el.closest(div).length) return;
if (el.closest(".mobile-menu").length) {
event.preventDefault();
var i = a.index(el.closest(".mobile-menu"));
b.toggle(div.eq(i).is(":hidden"));
div.not(div.eq(i).toggle()).hide()
} else {
div.hide();
b.hide()
}
})
});
</script>
</head>
<body>
<div class="back">back</div>
<a id="touch-menu" class="mobile-menu" href="#"><i class="icon-paragraph-left">left</i></a>
<nav class="menu">
<ul>
<li>left</li>
<li>left</li>
</ul>
</nav>
<a id="touch-menu-dom" class="mobile-menu" href="#"><i class="icon-paragraph-right">right</i></a>
<nav class="menu">
<ul>
<li>right</li>
<li>right</li>
</ul>
</nav>
</body>
</html>
|
ты золото, спасибо огромное, все работает как надо
|
| Часовой пояс GMT +3, время: 10:01. |