Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 20.09.2017, 15:37
Новичок на форуме
Отправить личное сообщение для makcim_tol Посмотреть профиль Найти все сообщения от makcim_tol
 
Регистрация: 20.09.2017
Сообщений: 6

закрытие меню вне блока
Сделал для мобильной версии сайта два меню.
Также создал блок (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();
    }
});

Но совсем не то что хотелось бы.
Ответить с цитированием
  #12 (permalink)  
Старый 20.09.2017, 15:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

makcim_tol,
минимальный макет хорошо бы и что не так в container.hide();?
возможно нужно $('a.mobile-menu').click() вместо этого
Ответить с цитированием
  #13 (permalink)  
Старый 20.09.2017, 16:29
Новичок на форуме
Отправить личное сообщение для makcim_tol Посмотреть профиль Найти все сообщения от makcim_tol
 
Регистрация: 20.09.2017
Сообщений: 6

вот минимальный макет:
<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>
Ответить с цитированием
  #14 (permalink)  
Старый 20.09.2017, 16:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

makcim_tol,
ок ... снова открывашка ...
Ответить с цитированием
  #15 (permalink)  
Старый 20.09.2017, 17:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

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>
Ответить с цитированием
  #16 (permalink)  
Старый 20.09.2017, 17:28
Новичок на форуме
Отправить личное сообщение для makcim_tol Посмотреть профиль Найти все сообщения от makcim_tol
 
Регистрация: 20.09.2017
Сообщений: 6

ты золото, спасибо огромное, все работает как надо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
plugin toggle for jquery или почему неработает toggle рони Ваши сайты и скрипты 0 10.11.2013 13:27
Проблема с toggle milanac Общие вопросы Javascript 4 29.10.2013 19:24
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Помогите. В чем проблема ? (toggle) brondex Events/DOM/Window 1 23.10.2011 18:48
дождаться выполнения toggle maximu$$ jQuery 7 04.05.2011 14:58