Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Нет плавного открытия и закрытия 2-го уровня меню, нет плавного открытия и закрытия 2-го уровня меню
SkAndriy  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 6
Пользователь №: 43487
На форуме: 1 месяц, 25 дней
Карма:




Ниже представлен код многоуровневого меню (3 уровня). Код работает, но есть две проблемы:

1. у второго уровня нет плавного раскрытия и скрытия.

2. при раскрытии разделов третьего уровня происходит задержка их имен (названий) и хотелось бы, чтобы при открытии одного подменю другие закрывались.

Вопрос: как исправить коды javascript, чтобы решить эти две задачи.

Спасибо

<script type="text/javascript"> 
$(function() {
var jQuery.browser.mobile = isTouchDevice = true;

$(window).on('resize', function() {
isMobileWidth=$(document).width()<768?true:false;
});

$(".menu__top-level li").hover(function(){
// Add code for mouse enter
var g = $(this);
if (!isMobileWidth) {
if(timeoutHandle){
clearTimeout(timeoutHandle);
timeoutHandle = null;
}
timeoutHandle = setTimeout(function() {
g.addClass("hover")
}, 250)
}
}
,
function(){
// Add code for mouse leave
if (!isMobileWidth) {
$(this).removeClass("hover");
clearTimeout(timeoutHandle)
}
}
);

$(".menu__top-level > li").each(function() {
if (!$(this).children(".menu__second-level").length) {
$(this).children("a").addClass("no-submenu");
$(this).addClass("no-submenu")
}
}
);

$(document).on("click", ".menu__top-level > li", function(e) {
if (isMobileWidth || jQuery.browser.mobile || isTouchDevice) {
var g = $(this);
if (g.hasClass("hover")) {
window.location = $(this).children("a").attr("href")
} else {
$('.menu__top-level > li > a:not(".no-submenu")').parent().removeClass("hover");
g.addClass("hover");
$children = g.find("> ul > li:not(.no-line)");
$(".menu__second-level li").removeClass("expanded");
if ($children.length == 1) {
$children.first().addClass("expanded")
}
}

if (g.find("ul").length > 0) {
return false
}
}
}
);

$(document).on("touchstart click", ".menu__top-level > li > ul > li > h3", function(event) {
if (event.type == "touchstart")
$(this).off('click').on('click', function(e){ e.preventDefault(); });

if (isMobileWidth || jQuery.browser.mobile || isTouchDevice) {
var g = $(this).parent();
if (g.hasClass("expanded")) {
g.removeClass("expanded",1000)
} else {
g.siblings().removeClass("expanded",1000);
g.addClass("expanded",1000);
}
return false
}
}
);
});
</
script>



<ul class="menu__top-level">
<li>
<a
class="" href="">Level-1</a>
<ul
class="menu__second-level">
<li>
<h3>
Level-2</h3>
<ul>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
</ul>
</li>
<li>
<h3>
Level-2</h3>
<ul>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
</ul>
</li>
<li
class="no-line"><a href=""><img data-src="" class="" alt="" src="">Here image</a></li>
</ul>
</li>
<li><a
class="" href="">Level-1</a>
<ul
class="menu__second-level">
<li>
<h3>
Level-2</h3>
<ul>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
</ul>
</li>
<li>
<h3>
Level-2</h3>
<ul>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
</ul>
</li>
<li>
<h3>
Level-2</h3>
<ul>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
<li><a
href="">Level-3</a></li>
</ul>
</li>
<li
class="no-line"><a href=""><img data-src="" class="" alt="" src="">Here image</a></li>
</ul>
</li>
</ul>

PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Игорь_Vasinsky  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Лысый и злой
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 25994
Пользователь №: 21350
На форуме: 6 лет, 8 месяцев, 25 дней
Карма: 725

Не курю:
1 год, 2 месяца, 11 дней


дофига ошибок засыпало. в основном из-за неопределённых переменных и функции timeoutHandle

не полный JS код дал.


--------------------
Халявные ответы кончились.
Если нужен готовый код - готовьтесь заплатить.
Райкин тоже был артист

Возле дома был сарай
А когда всё хорошо
Можно просто покурить

user posted image
http://ufa102.xyz/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
SkAndriy  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 6
Пользователь №: 43487
На форуме: 1 месяц, 25 дней
Карма:




что касается данного меню, то код абсолютно весь. можете скопировать и проверить. меню работает. пожалуйста укажите на ошибки. спасибо

Это сообщение отредактировал SkAndriy - 14.10.2016 - 09:55
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса