javascript - Bootstrap 4 nav dropdown hover on desktopclick mobile - Stack Overflow

admin管理员组

文章数量:1400344

Boostrap 4 navbar, I removed data-toggle = toggle and added a "open" on hover for desktop with jquery, works great. My issue now is I would like the navbar items to be "click" at a certain breakpoint "tablet / mobile". Would I add a conditional window.width? any help / direction would be awesome!

HTML:

<div class="navbar-collapse collapse main-nav-bottom--ul" id=“nav”>
<ul class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="leigh.html" id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active"> Spotlight</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href="ronstory.html">Rons Story</a>
            <a class="dropdown-item" href="disorder.html">Disorder</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="how-to-be-vocal.html" id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active">Test</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href=“test.html">Test</a>
        </div>
    </li>
</div>

jquery:

$(function() {
  $dropDown.mouseenter(function() {
    $(this).find($dropDownMenu).addClass('show');
    $(this).find($dropDownToggle).addClass('active');

    if ($($dropDownMenu).hasClass('show')) {
      $(this).find('.underline-active').addClass('underline-nav');
      $(this).find($dropDownToggle).addClass('dropdown-toggle--color');
    }
  });

  $dropDown.mouseleave(function() {
    $(this).find($dropDownMenu).removeClass('show');
    $(this).find($dropDownToggle).removeClass('active');

    if (!$($dropDownMenu).hasClass('show')) {
      $(this).find('.underline-active').removeClass('underline-nav');
      $(this).find($dropDownToggle).removeClass('dropdown-toggle--color');
    }
  });
});

Boostrap 4 navbar, I removed data-toggle = toggle and added a "open" on hover for desktop with jquery, works great. My issue now is I would like the navbar items to be "click" at a certain breakpoint "tablet / mobile". Would I add a conditional window.width? any help / direction would be awesome!

HTML:

<div class="navbar-collapse collapse main-nav-bottom--ul" id=“nav”>
<ul class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="leigh.html" id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active"> Spotlight</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href="ronstory.html">Rons Story</a>
            <a class="dropdown-item" href="disorder.html">Disorder</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="how-to-be-vocal.html" id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline-active">Test</span>
        </a>
        <div class="dropdown-menu dropdown-menu-nav-bottom"
             aria-labelledby="navbar-drop-downs">
            <a class="dropdown-item" href=“test.html">Test</a>
        </div>
    </li>
</div>

jquery:

$(function() {
  $dropDown.mouseenter(function() {
    $(this).find($dropDownMenu).addClass('show');
    $(this).find($dropDownToggle).addClass('active');

    if ($($dropDownMenu).hasClass('show')) {
      $(this).find('.underline-active').addClass('underline-nav');
      $(this).find($dropDownToggle).addClass('dropdown-toggle--color');
    }
  });

  $dropDown.mouseleave(function() {
    $(this).find($dropDownMenu).removeClass('show');
    $(this).find($dropDownToggle).removeClass('active');

    if (!$($dropDownMenu).hasClass('show')) {
      $(this).find('.underline-active').removeClass('underline-nav');
      $(this).find($dropDownToggle).removeClass('dropdown-toggle--color');
    }
  });
});

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 14, 2019 at 15:25 Narendra Jadhav 10.3k1515 gold badges3434 silver badges4444 bronze badges asked Nov 14, 2019 at 15:21 hendy0817hendy0817 1,07922 gold badges2828 silver badges6161 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

First create navbar hope u created after that

Submenu opening when hovering

First we need to figure out if the navbar is collapsed or not. The easiest way to do is to determine the window width. With a width lower then 768 pixel, it will collapse. So when the width is 768 or higher, we want the submenu to show when hovering, a effect which is usually trigger by a click. Let’s take this knowledge to a javascript function.

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        });  
    }  
}  

The submenu is now showing when hovering the parent menu item. Hovering out doesn’t close the submenu, a feature we want. That means we need to add some functionality to the hover out event.

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        }).on('mouseout', function(){  
            $('.dropdown-toggle', this).trigger('click').blur();  
        });  
    }  
}  

This will trigger a click event once more when hover out. As a second click closes the submenu, we simulate this behavior. Also we want to get rid of the focus on the parent menu item. Therefor I added the blur();. But when the width is lower then 768 pixels, we need to fall back to the original “click to open” method. So lets remove the mouseover and mouseout event listeners.

function toggleNavbarMethod() {  
    if ($(window).width() > 768) {  
        $('.navbar .dropdown').on('mouseover', function(){  
            $('.dropdown-toggle', this).trigger('click');   
        }).on('mouseout', function(){  
            $('.dropdown-toggle', this).trigger('click').blur();  
        });  
    }  
    else {  
        $('.navbar .dropdown').off('mouseover').off('mouseout');  
    }  
}  

The navbar is fully functional and opens the submenu’s when hovering it’s parent as long as the navbar isn’t collapsed.

Determining submenu behavior when resizing the window

But what if the user resizes his window? The navbar submenu behavior needs to be determined again. We can do that by adding a resize event listener.

$(window).resize(toggleNavbarMethod);

The last thing we need to do, is to activate the script and bind the resize listener.

The Final Script

$(document).ready(function() {  
    function toggleNavbarMethod() {  
        if ($(window).width() > 768) {  
            $('.navbar .dropdown').on('mouseover', function(){  
                $('.dropdown-toggle', this).trigger('click');   
            }).on('mouseout', function(){  
                $('.dropdown-toggle', this).trigger('click').blur();  
            });  
        }  
        else {  
            $('.navbar .dropdown').off('mouseover').off('mouseout');  
        }  
    }  
    toggleNavbarMethod();  
    $(window).resize(toggleNavbarMethod);  
}); 

Here Is Example

$(document).ready(function() {  
    function toggleNavbarMethod() {  
        if ($(window).width() > 768) {  
            $('.navbar .dropdown').on('mouseover', function(){  
                $('.dropdown-toggle', this).trigger('click');   
            }).on('mouseout', function(){  
                $('.dropdown-toggle', this).trigger('click').blur();  
            });  
        }  
        else {  
            $('.navbar .dropdown').off('mouseover').off('mouseout');  
        }  
    }  
    toggleNavbarMethod();  
    $(window).resize(toggleNavbarMethod);  
}); 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis./ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">Brand</a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link active">Home</a>
            <a href="#" class="nav-item nav-link">Profile</a>
            <div class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Inbox</a>
                    <a href="#" class="dropdown-item">Sent</a>
                    <a href="#" class="dropdown-item">Drafts</a>
                </div>
            </div>
        </div>
        <form class="form-inline">
            <div class="input-group">                    
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary"><i class="fa fa-search"></i></button>
                </div>
            </div>
        </form>
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link">Login</a>
        </div>
    </div>
</nav>

You Can Edit or Preview Code Here

本文标签： javascriptBootstrap 4 nav dropdown hover on desktopclick mobileStack Overflow