1

I've a pretty straightforward bootstrap menu that collapse when screen width is under 768px 

<div id="headerNavbar" class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#headerMenu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="headerMenu" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a>temp</a></li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DATA <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a>temp</a></li>
                    <li><a>temp</a></li>
                </ul>
            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TOOLS <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a>temp</a></li>
                    <li><a>temp</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

This works fine but I want to auto-open first level link on mouse hover only when screen width is more than 768px, so I added this piece of code

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        if (window.innerWidth > 767) {
            $('ul.dropdown-menu', this).stop(true, true).slideDown(0);
            $(this).addClass('open');
        }
    }, function () {
        if (window.innerWidth > 767) {
            $('ul.dropdown-menu', this).stop(true, true).slideUp(0);
            $(this).removeClass('open');
        }
    });
});

On full screen it works, but if window is full screen then it's resized under 768 menu stop working (eg: click doesn't work) until it is enlarged again and auto-expand will work again.

How can I solve this? Is there a kind of reset to apply to dropdown mechanism?

Naigel
  • 9,086
  • 16
  • 65
  • 106
  • It's maybe because, and I'll take a shot in the dark here... because of ">767" instead of "<767" :) – Ionut Necula Dec 04 '15 at 13:18
  • Meanwhile I will use the CSS code found here http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click but I need a jquery way (need to add and remove it, injecting CSS doesn't seem a clean way) – Naigel Dec 04 '15 at 13:24

0 Answers0