Ниже представлен код многоуровневого меню (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>
