我有这个脚本，当你有一个小屏幕，你必须点击，点击手机，显示下拉菜单。现在它可以在这个屏幕尺寸上工作，但是在更大的尺寸上，我不希望人们不得不点击狗屎我希望它在悬停。
这是我的代码
$( 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>
答案 0 :(得分：2)
试试这个：
$( 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;
});
}
});
jQuery方法：.hover( handlerIn, handlerOut )
答案 1 :(得分：0)
这是因为当你将鼠标悬停在菜单上时，它会告诉菜单显示为一个块，它不会做任何其他事情。
在悬停时添加一个.block类，然后添加toggleClass，然后根据需要添加和删除。
.block { display:block; }
$(".dropdown").hover(
function(){
$('ul.nav li.dropdown:hover > ul.dropdown-menu').toggleClass('block');
console.log('display block de nav HOVER');
});
答案 2 :(得分：0)
根据@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);
});