导航悬停在桌面上,点击移动
问题描述:
我有一个JSFiddle here。导航悬停在桌面上,点击移动
这是一个带有下拉菜单的引导式导航。 我没有使用引导程序下拉,但我自己的。 下拉菜单需要在桌面上悬停并点击移动时显示。
我有一个媒体查询来显示悬停在桌面上的下拉菜单。 我使用Modernizr以移动尺寸添加单击事件。 如果以该大小加载页面,则桌面和移动功能将起作用。如果页面以桌面大小加载,则悬停会起作用,并且如果页面以手机大小加载,则移动功能可以运行
如果我在桌面大小加载页面,然后将页面大小调整为手机大小,或者反之,不起作用。如果我在桌面大小加载悬停工作,但如果我然后调整到移动大小的点击无法正常工作。
页面大小调整后,我并不需要这样做,因为如果您在移动设备上,您将不会调整大小。谁能告诉我为什么会发生这种情况,如果有解决方案?
$(function(){
function doneResizing() {
if(Modernizr.mq('screen and (max-width:767px)')) {
$('.at-drop-down').on('click', function(e){
e.preventDefault();
$(this).next($('.sub-menu')).slideToggle();
})
}
}
var id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(doneResizing, 0);
});
doneResizing();
});
答
我相信这个问题是因为,当你调整时,doneResizing()
方法被调用多次,并且它重视多的单击事件处理程序的下拉列表。
你可以代替试试这个:
$(function(){
$('.at-drop-down').on('click', function(e){
if(Modernizr.mq('screen and (max-width:767px)')) {
e.preventDefault();
$(this).next($('.sub-menu')).slideToggle();
}
})
});
有没有需要调整大小事件和点击事件永远只能注册一次。
演示:https://jsfiddle.net/alan0xd7/cwwaqp5k/45/
更新:
哈弗问题:在 “移动模式”,如果你点击了什么东西,然后调整到 “全模式” 中,悬停停止工作。这是因为slideToggle()
设置CSS样式来隐藏和显示元素。为此,您可以将其删除:
$(window).resize(function() {
$('.sub-menu').attr("style", "");
});
答
您要添加大量的事件监听器,当你调整。尝试改变JS来
$(function(){
function doneResizing() {
if(Modernizr.mq('screen and (max-width:767px)')) {
$('.at-drop-down').off('click'); //Remove all previous event listeners
$('.at-drop-down').on('click', function(e){
e.preventDefault();
$(this).next($('.sub-menu')).slideToggle();
})
}
}
var id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(doneResizing, 0);
});
doneResizing();
});
答
$(window).resize(function(){
var wid = $(window).width();
if(wid < 768){
$(".dropdown").on('click', function(){
$('.dropdown-menu', this).stop(true, true).fadeIn("fast");
$(this).toggleClass('open');
});
}
else{
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop(true, true).fadeIn("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).stop(true, true).fadeOut("fast");
$(this).toggleClass('open');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Inspiration<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">LookBook</a></li>
<li><a href="#">Designs</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>
谢谢,解决重复开闭,但我仍然有悬停的问题不工作 – ttmt
alan0xd7 - 我知道,但它只是一些这让我很烦恼。 – ttmt
@ttmt更新了悬停的答案 – alan0xd7