问题描述:

I am using Bootstrap typical nav with dropdown.

I want the dropdown to show on hover and hide on mouseout. But when the device width is less than 979px I want the dropdown to show on click instead of hover.

I wrote some jQuery to achieve this. It works fine but when I decrease the browser width to less than 979px it shows the dropdown on hover. I want this to only show dropdown on click. Ironically, If I keep the browser width at less than 979px then it doesnt show on hover.

My jQuery:

$(document).ready(function() {

if ($(window).width() < 979) {

$(".md-nav ul.nav li.dropdown").click(function () {

$('li.dropdown > a').addClass('dropdown-toggle');

$('li.dropdown > a').attr('data-toggle','dropdown');

});

}

if ($(window).width() > 979) {

$(".md-nav li.dropdown").hover(function () {

$(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(400).show(0);

}, function () {

$(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(500).hide(0);

});

}

});

My HTML for the navigation:

 <nav class="navbar navbar-default md-nav" role="navigation">

<div class="container-fluid">

<select class="nav-sel">

<option value="Vous Etes">Vous Etes</option>

<option value="Vous Etes">Vous Etes</option>

<option value="Vous Etes">Vous Etes</option>

<option value="Vous Etes">Vous Etes</option>

</select>

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav nav nav-tabs">

<li class="dropdown"><a href="#">Ministére</a>

<div class="dropdown-menu">

<ul>

<li><a href="#">Promotion</a></li>

<li><a href="#">Prévention</a></li>

<li><a href="#">Les Féderations</a></li>

<li><a href="#">Le diréct</a></li>

<li><a href="#">Emplois & Mériers</a></li>

<li><a href="#">Grand Evénements</a></li>

</ul>

<img src="img/athlete-img1.jpg" alt="athlete running" />

</div>

</li>

<li class="dropdown"><a href="#">Sport</a>

<div class="dropdown-menu">

<ul>

<li><a href="#">Promotion</a></li>

<li><a href="#">Prévention</a></li>

<li><a href="#">Les Féderations</a></li>

<li><a href="#">Le diréct</a></li>

<li><a href="#">Emplois & Mériers</a></li>

<li><a href="#">Grand Evénements</a></li>

</ul>

<img src="img/athlete-img1.jpg" alt="athlete running" />

</div>

</li>

<li class="dropdown"><a href="#">Jeunesse</a>

<div class="dropdown-menu">

<ul>

<li><a href="#">Promotion</a></li>

<li><a href="#">Prévention</a></li>

<li><a href="#">Les Féderations</a></li>

<li><a href="#">Le diréct</a></li>

<li><a href="#">Emplois & Mériers</a></li>

<li><a href="#">Grand Evénements</a></li>

</ul>

<img src="img/athlete-img1.jpg" alt="athlete running" />

</div>

</li>

<li class="dropdown"><a href="#">Publications</a>

<div class="dropdown-menu">

<ul>

<li><a href="#">Promotion</a></li>

<li><a href="#">Prévention</a></li>

<li><a href="#">Les Féderations</a></li>

<li><a href="#">Le diréct</a></li>

<li><a href="#">Emplois & Mériers</a></li>

<li><a href="#">Grand Evénements</a></li>

</ul>

<img src="img/athlete-img1.jpg" alt="athlete running" />

</div>

</li>

<li class="dropdown"><a href="#">Mediatheque</a>

<div class="dropdown-menu">

<ul>

<li><a href="#">Promotion</a></li>

<li><a href="#">Prévention</a></li>

<li><a href="#">Les Féderations</a></li>

<li><a href="#">Le diréct</a></li>

<li><a href="#">Emplois & Mériers</a></li>

<li><a href="#">Grand Evénements</a></li>

</ul>

<img src="img/athlete-img1.jpg" alt="athlete running" />

</div>

</li>

<li><a href="#">Espace Medias</a></li>

</ul>

</div><!-- /.navbar-collapse -->

</div><!-- /.container -->

</nav>

网友答案:

This happens because your current logic is the following:

  1. check screen size (width)
  2. create event handler for click if width is less than 979
  3. create event handler for hover if width is greater than 979

Which, in short, means the width check is only performed once when you open the page, and the event handler is attached accordingly. To overcome this, I suggest using an alternative logic:

  1. add event handler for click and for hover
  2. on click if browser width is less than 979px show dropdown
  3. on hover if browser width is greater than (or equal) to 979px show dropdown

Javascript

$(".md-nav ul.nav li.dropdown").click(function () {
    if ($(window).width() < 979) {
        $('li.dropdown > a').addClass('dropdown-toggle');
        $('li.dropdown > a').attr('data-toggle','dropdown');            
    }
});

$(".md-nav li.dropdown").hover(function () {
    if ($(window).width() >= 979) {
        $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(400).show(0);
    }
}, function () {
    if ($(window).width() >= 979) {
        $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(500).hide(0);
    }
});

Another alternative would be following your logic and attaching the given event handler depending on browser width, and refreshing this each time the browser window is resized:

Javascript

$(window).on('resize', function (e) {
    // reattach event handler if necessary
});

Keep in mind, however, that with this approach you need to delete the previous event handlers, or they will stack on top of each other.

相关阅读:
Top