Javascript 下拉菜单媒体屏幕悬停时未关闭
事实上,当我们在手机屏幕上或低于1024(设置)打开站点时,手机菜单就会出现Javascript 下拉菜单媒体屏幕悬停时未关闭,javascript,html,css,Javascript,Html,Css,事实上,当我们在手机屏幕上或低于1024(设置)打开站点时,手机菜单就会出现 所以,在移动菜单中,当我们点击下拉菜单来显示选项时,它工作正常,但关闭下拉菜单却无能为力 但要关闭“下拉菜单”,除了关闭整个菜单外,没有其他选项。但是,当我们在其他网站上看到下拉菜单时,如果我们看到下拉菜单,它会在网站上的某个地方单击关闭,或者将鼠标悬停在除此之外的任何位置,则无法执行任何操作 /*菜单手机-平板电脑-智能手机*/ #class_menu{height:auto} #show-menu{display
#class_menu{height:auto}
#show-menu{display:block;z-index:3;height:60px}
#show-menu a,#close-menu a{cursor:pointer;font-size:25px;color:#fff !important;font-weight:normal !important;padding:0;height:60px;line-height:60px;width:60px;text-align:center;position:absolute;z-index:2}
#mobile-menu-show{display:none;}
#close-menu{display:none;}
.navi li{display:block;width:100%;max-width:100%;padding:0 !important;margin:0 !important;text-align:center;list-style:none !important;}
.navi li.diffr{display:none;}
.navi li.first:before{content:"";text-decoration:inherit;height:60px;display:block}
.navi li a{background:#a91717;padding:0!important;margin:0 auto;list-style:none !important;height:45px;line-height:45px;color:#fff!important;border-top:1px solid #bb1919!important;}
.navi li ul li a{border-color:#bb1919!important;border-bottom:none!important}
.navi li ul li a:hover{border-color:#bb1919!important;}
.navi li a:hover{background:#bb1919}
.navi ul ul li a{text-align:center}
}
上述css的HTML代码:
<div class='class_menu' id='class_menu'>
<div class='show-menu' id='show-menu'><a href='javascript:void(0)' onclick='document.getElementById('mobile-menu-show').style.display='block';document.getElementById('close-menu').style.display='block';document.getElementById('show-menu').style.display='none''><i aria-hidden='true' class='fa fa-bars'/></a></div>
<div id='close-menu'><a href='javascript:void(0)' onclick='document.getElementById('mobile-menu-show').style.display='none';document.getElementById('close-menu').style.display='none';document.getElementById('show-menu').style.display='block''><i aria-hidden='true' class='fa fa-times'/></a></div>
<nav class='navi menu-mobile' id='mobile-menu-show' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<li style="background-color:#981414;" class='first'><a href='/' itemprop='url' rel='tag nofollow' title='Homepage'><span style="margin:0 10px;" itemprop='name'><i class='fa fa-home'/></span></a></li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 1'><span itemprop='name'></span></a></li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 2'><span itemprop='name'></span></a></li>
<li class='diffr'>|</li>
<li class='dropdown-menu' tabindex='0'><a href="#"><span>Refer and Earn</span> <i aria-hidden='true' class='fa fa-angle-down'/></a>
<ul class='dropdown-menu-content'>
<li><a href='/' itemprop='url' title='Dropdown 1'><span itemprop='name'>Recharge Tricks</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 2'><span itemprop='name'>Refer and Earn</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 3'><span itemprop='name'>ting ling designs and for</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 4'><span itemprop='name'>Dropdown 4</span></a></li>
<li><a href='/' itemprop='url' title='Dropdown 5'><span itemprop='name'>Dropdown 5</span></a></li>
</ul>
</li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 4'><span itemprop='name'>Shopping Deals</span></a></li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 5'><span itemprop='name'>Coupons</span></a></li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 6'><span itemprop='name'>Tech News</span></a></li>
<li class='diffr'>|</li>
<li><a href='#' itemprop='url' rel='tag nofollow' title='Menu 6'><span itemprop='name'>Tips a Tricks</span></a></li>
</ul></nav>
<div class='container_search'>
<form action='/search/max-results=7' class='searchbox'>
<input class='searchbox-input' name='search' onkeyup='buttonUp();' placeholder='Type to Search' type='search'/>
<input class='searchbox-submit' type='submit' value='GO'/>
<span class='searchbox-icon'><i aria-hidden='true' class='fa fa-search'/></span>
</form>
</div>
</div>
- |
- |
-
- |
- |
- |
- |
对于不工作的菜单演示,请检查:
非常感谢:)为什么不在这里使用悬停选择器呢?这将允许智能手机上的用户根据需要进行交互,因为“悬停”事件是在用户点击时触发的。电脑屏幕也会更容易使用
/*仅用于模板*/
李{
列表样式:无;
背景色:红色;
颜色:白色;
}
a{
文字装饰:无;
颜色:继承;
}
/*用这个*/
李乌尔{
显示:无;
背景颜色:灰色;
}
李宇莉{
背景颜色:灰色;
}
李:悬停{
显示:块;
}
参考并获取
将上面的文本悬停以显示子菜单,返回此文本以再次隐藏它们。
要求用户手动关闭下拉列表会被贬低,因为它会在一般规则中创建无用的额外步骤。