悬停下拉菜单即使在鼠标移出后也保持活动状态
Hover dropdown stays active even after mouseout
我有这个脚本，当你有一个小屏幕时，你必须点击，点击手机，显示下拉菜单。现在它可以在这个屏幕上工作，但在更大的屏幕上，我不希望人们必须点击大便，我希望它处于悬停状态。
这是我的代码
$( document ).ready(function() {
var open = false;
if ($(window).width() > 767) {
$(".dropdown").hover(
function(){
$('ul.nav li.dropdown:hover > ul.dropdown-menu').css('display','block');
console.log('display block de nav HOVER');
});
}
else {
console.log('kleiner');
$(".dropdown").click(
function(){
if (open){
$('ul.nav li.dropdown:hover > ul.dropdown-menu').css('display','none');
console.log('display none de nav');
} else {
$('ul.nav li.dropdown:hover > ul.dropdown-menu').css('display','block');
console.log('display block de nav');
}
open = !open;
});
}
});
html
<nav id="navbar" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#typo-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@if(Sentinel::guest())
<a class="navbar-brand" href="{{ route('auth.login') }}">Typografics Academy</a>
@elseif(Sentinel::inRole('user'))
<a class="navbar-brand" href="{{ route('user.dashboard') }}">Typografics Academy</a>
@elseif(Sentinel::inRole('admin') || Sentinel::inRole('super'))
<a class="navbar-brand" href="{{ route('admin.dashboard') }}">Typografics Academy</a>
@endif
</div>
<div class="collapse navbar-collapse" id="typo-navbar-collapse-1">
<ul class="nav navbar-nav">
@if(!Sentinel::guest())
@if(Sentinel::inRole('user'))
<li {{ Request::is('/results*') ? 'class=active' : ''}}><a href="{{ route('user.results') }}">Results</a></li>
@elseif(Sentinel::inRole('admin') || Sentinel::inRole('super'))
<li {{ Request::is('admin/users*') ? 'class=active' : ''}}><a href="{{ route('users.overview') }}">Gebruikers</a></li>
<li {{ Request::is('admin/tests*') ? 'class=active' : ''}}><a href="{{ route('tests.overview') }}" >Tests</a></li>
<li {{ Request::is('admin/profiles*') ? 'class=active' : ''}}><a href="{{ route('profiles.overview') }}">Profielen</a></li>
<li {{ Request::is('admin/results*') ? 'class=active' : ''}}><a href="{{ route('results.overview') }}">Results</a></li>
@if(Sentinel::inRole('super'))
<li {{ Request::is('admin/questions*') ? 'class=active' : ''}}><a href="{{ route('questions.overview') }}">Vragen</a></li>
<li {{ Request::is('admin/categories*') ? 'class=active' : ''}}><a href="{{ route('categories.overview') }}">{{trans('master.categories')}}</a></li>
<li {{ Request::is('admin/companies*') ? 'class=active' : ''}}><a href="{{ route('companies.overview') }}">Bedrijven</a></li>
@endif
<li class="dropdown">
<a href="#" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-plus"></span> Nieuw <span class="caret"></span></a>
<ul class="dropdown-menu">
<li {{ Request::is('admin/users/new') ? 'class=active' : ''}}><a href="{{ route('users.new') }}">{{trans('master.user')}}</a></li>
<li {{ Request::is('admin/tests/new') ? 'class=active' : ''}}><a href="{{ route('tests.new.1') }}">{{trans('master.test')}}</a></li>
<li {{ Request::is('admin/profiles/new') ? 'class=active' : ''}}><a href="{{ route('profiles.new') }}">{{trans('master.profile')}}</a></li>
@if(Sentinel::inRole('super'))
<li {{ Request::is('admin/questions/new') ? 'class=active' : ''}}><a href="{{ route('questions.new') }}">{{trans('master.question')}}</a></li>
<li {{ Request::is('admin/categories/new') ? 'class=active' : ''}}><a href="{{ route('categories.new') }}">{{trans('master.category')}}</a></li>
<li {{ Request::is('admin/subcategories/new') ? 'class=active' : ''}}><a href="{{ route('subcategories.new.without') }}">{{trans('master.subcategory')}}</a></li>
<li {{ Request::is('admin/companies/new') ? 'class=active' : ''}}><a href="{{ route('companies.new') }}">{{trans('master.company')}}</a></li>
@endif
</ul>
</li>
@endif
@endif
</ul>
@if(!Sentinel::guest())
<ul class="nav navbar-nav navbar-right">
<li><a class="userprofiel" href="#">{{ucwords(Sentinel::check()->first_name)}}</a></li>
<li><a class="logout" href="{{ route('auth.logout') }}">Logout</a></li>
</ul>
@else
<ul class="nav navbar-nav navbar-right">
<li {{ Request::is('auth/login') ? 'class=active' : ''}}><a href="{{ route('auth.login') }}">Login</a></li>
</ul>
@endif
</div>
</div>
</nav>
试试这个：
$( document ).ready(function() {
var open = false;
if ($(window).width() > 767) {
$(".dropdown").hover(
function(){
$(this).find('.dropdown-menu').css('display','block');
console.log('display block de nav HOVER');
}, function() {
$(this).find('.dropdown-menu').css('display','none');
});
}
else {
console.log('kleiner');
$(".dropdown").click(
function(){
if (open){
$('ul.nav li.dropdown:hover > ul.dropdown-menu').css('display','none');
console.log('display none de nav');
} else {
$('ul.nav li.dropdown:hover > ul.dropdown-menu').css('display','block');
console.log('display block de nav');
}
open = !open;
});
}
});
输出：http://output.jsbin.com/wekepi
代码：http://jsbin.com/wekepi/edit?js
jQuery方法：.hover( handlerIn, handlerOut )
参考编号：https://api.jquery.com/hover/
这是因为当您将鼠标悬停在菜单上时，它会告诉菜单显示为块，而不会执行任何其他操作。
添加一个.block类，然后在悬停时切换class，然后根据需要添加和删除。
.block { display:block; }
$(".dropdown").hover(
function(){
$('ul.nav li.dropdown:hover > ul.dropdown-menu').toggleClass('block');
console.log('display block de nav HOVER');
});
根据@Surender Lohia的回答，我找到了这个问题的正确解决方案。
$(document).ready(function () {
var open = false;
var displayB = function () {
$('.dropdown-menu').css('display', 'block');
console.log('display BLOCK de nav HOVER');
};
var displayN = function () {
$('.dropdown-menu').css('display', 'none');
console.log('display NONE de nav HOVER');
};
var resizeEvent = function () {
if ($(window).width() > 767) {
$(".dropdown").hover(displayB, displayN);
} else {
console.log('kleiner');
$('.dropdown').off();
$(".dropdown").click(function () {
if (open) {
displayN();
} else {
displayB();
}
open = !open;
});
}
};
resizeEvent();
$(window).resize(resizeEvent);
});
相关文章：
- 在Angular 2中布线期间保持零部件处于活动状态
- 如何使bxslider仅在移动视图中处于活动状态
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 我如何为列出的选项卡元素编写一个Protractor测试，它会检查它是否's是否处于活动状态
- 返回上一页时，Javascript仍处于活动状态
- Angular+bootstrap ui，检查当前选项卡是否已处于活动状态
- 按钮处于活动状态，焦点无法在Mac FireFox上工作
- 禁用永久活动状态
- 单击我网站中的链接时打开新选项卡，保持当前选项卡处于活动状态
- 弹出窗口处于活动状态时禁用滚动
- 有没有办法找出Javascript中有多少个间隔处于活动状态
- 在Chrome扩展弹出窗口中保持Flash元素处于活动状态
- 传单禁用缩放到标记以及如何保持弹出窗口始终处于活动状态
- 悬停保持活动状态，直到鼠标移到另一个悬停对象上
- 元素在将指针快速移出窗口时保持悬停状态
- 在潜水之间切换时移除活动状态
- 当弹出框处于活动状态时，如何在离子中与背景中的项目进行交互
- 当按钮处于活动状态(点击)时，移除按钮的阴影
- 当按钮处于活动状态(点击)时，移除按钮的阴影
