Pixelsquare Pixelsquare - 6 months ago 15
Javascript Question

Hover dropdown stays active even after mouseout

I have this script where I made it when you have a small screen you have to click, tap on mobile, to show the dropdown menu. Now it works on this screen size but on bigger sizes I don't want people having to click on shit I want it to be on hover.

This is my code

$( 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;

});
}
});


The 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>

Answer

Try this:

$( 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;

             });
        }
});

Output: http://output.jsbin.com/wekepi

Code: http://jsbin.com/wekepi/edit?js

jQuery method: .hover( handlerIn, handlerOut )

Ref: https://api.jquery.com/hover/

Comments