Проблема с заменой toggle
Здравствуйте, столкнулся с проблемой замены toggle(). Как я знаю, данный метод в последних версиях jquery работает иначе, нашёл такую альтернативу :
var flag = new Boolean(true);//Создаем логическую переменную (со значением true) $('.table').hide(); $('h3').click(function() { if (flag) {//Если flag == true flag = false;//Меняем значение переменной flag func1.call(this);//Вызываем func1 с контекстом этой функции (т.е. в вызванной функции this = this этой функции) } else {//Если flag не равно true flag = true; func2.call(this); } return false; }); function func1() {$('.table').slideDown(500);}; function func2() {$('.table').slideUp(500);}; <h3>Заголовок</h3> <div class="table">Контент</div> <h3>Заголовок</h3> <div class="table">Контент</div> Корень проблемы - переменная flag будет менять значение true/false вне зависимости по какому именно h3 мы кликаем, можно конечно для каждого заголовка прописать свою переменную, но получится довольно большой код, нет ли более изящного решения ? |
как насчет slideToggle()?
|
Иззет,
если очень хочется plugin toggle for jquery или почему неработает toggle <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .table{ display: none; } h3{ cursor: pointer; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <h3>Заголовок</h3> <div class="table">Контент</div> <h3>Заголовок</h3> <div class="table">Контент</div> <script> $.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('.table') $('.table:visible').not($next).prev().click(); $next.slideDown(500)}; function func2() {$(this).next('.table').slideUp(500)}; $('h3').oldtoggle(func1, func2); </script> </body> </html> |
danik.js,Спасибо, очень полезный метод. Вопрос - нужно давать класс заголовку, когда блок под ним развернут и убирать класс, когда блок сворачивается, как это реализовывается в данном случае ?
|
|
рони,
Большое спасибо, работает, можете, если не трудно, комментариями объяснить как ваша функция работает? я не совсем разобрался с её принципом работы. Ещё одна проблема - нужно чтобы в данный момент только один блок был бы виден, т.е. чтобы при разворачивании одного блока, другие бы все скрывались. $('.table').hide() в func1 не решает дело |
Аналог на stackoverflow, с небольшим отличием, нормальным предложенным именем, необфусцированными переменными:
http://stackoverflow.com/a/14478259 рони, извини, минус поставить не могу - скажи спасибо глючному движку. |
Цитата:
Цитата:
|
Иззет,
Вариант без toggle ... <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .table{ display: none; } h3{ cursor: pointer; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <h3>Заголовок</h3> <div class="table">Контент</div> <h3>Заголовок</h3> <div class="table">Контент</div> <script> var $table = $('.table'); $('h3').click(function () { var $next = $(this).next('.table'); $table.not($next).slideUp(500); $next.slideToggle(500) }); </script> </body> </html> |
рони,
Спасибо за помощь |
закрытие меню вне блока
Сделал для мобильной версии сайта два меню.
Также создал блок (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, время: 04:31. |