javascript - Bootstrap Navbar Dropdown on Hover if not mobile - Stack Overflow

admin管理员组

文章数量:1393900

I am trying to make bootstrap dropdown list from navbar to appear on hover but stop the hover effect on collapsed (mobile). This is what I have in mind, but when I add the if statement the whole effect doesnt work: HTML:

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand vaos" href="../index.html">VAOS</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
          <li class="active"><a class="trans" href="../index.html">Home</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">What is VAOS <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="options.html">VAOS & Other Options</a></li>
              <li><a href="candidate.html">Am I a Candidate</a></li>
              <li><a href="surgeon.html">Find a Surgeon</a></li>
              <li><div class="ArrowUp1"></div></li>
            </ul>
         </li>

          <li><a href="experience.html">Testimonials</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resources <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="clinical-support.html">Clinical Support</a></li>
              <li><a href="videos.html">Procedural Videos</a></li>
              <li><a href="resources.html">Other Links & Resources</a></li>
              <li><div class="ArrowUp2"></div></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>

CSS:

@media (min-width: 768px) {
  .navbar-nav .open ul {
    display: none;
  }
  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,
  .navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background: none;
  }
  .navbar-default .navbar-nav > li:hover {
    background: #e7e7e7;
  }
  .navbar-inverse .navbar-nav > .open > a,
  .navbar-inverse .navbar-nav > .open > a:hover,
  .navbar-inverse .navbar-nav > .open > a:focus {
    color: #969696;
    background: none;
  }
  .navbar-nav > li:hover {
    background: transparent !important;
  }
  .navbar-nav .hovernav:hover > .dropdown-menu {
    display: block;
  }
}

JavaScript:

'use strict';

$('ul.nav li.dropdown').hover(function() {
  if(window.width > 767) {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  }   
});

I am trying to make bootstrap dropdown list from navbar to appear on hover but stop the hover effect on collapsed (mobile). This is what I have in mind, but when I add the if statement the whole effect doesnt work: HTML:

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand vaos" href="../index.html">VAOS</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
          <li class="active"><a class="trans" href="../index.html">Home</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">What is VAOS <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="options.html">VAOS & Other Options</a></li>
              <li><a href="candidate.html">Am I a Candidate</a></li>
              <li><a href="surgeon.html">Find a Surgeon</a></li>
              <li><div class="ArrowUp1"></div></li>
            </ul>
         </li>

          <li><a href="experience.html">Testimonials</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resources <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="clinical-support.html">Clinical Support</a></li>
              <li><a href="videos.html">Procedural Videos</a></li>
              <li><a href="resources.html">Other Links & Resources</a></li>
              <li><div class="ArrowUp2"></div></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>

CSS:

@media (min-width: 768px) {
  .navbar-nav .open ul {
    display: none;
  }
  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,
  .navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background: none;
  }
  .navbar-default .navbar-nav > li:hover {
    background: #e7e7e7;
  }
  .navbar-inverse .navbar-nav > .open > a,
  .navbar-inverse .navbar-nav > .open > a:hover,
  .navbar-inverse .navbar-nav > .open > a:focus {
    color: #969696;
    background: none;
  }
  .navbar-nav > li:hover {
    background: transparent !important;
  }
  .navbar-nav .hovernav:hover > .dropdown-menu {
    display: block;
  }
}

JavaScript:

'use strict';

$('ul.nav li.dropdown').hover(function() {
  if(window.width > 767) {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  }   
});

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Jun 29, 2015 at 7:49 Siguza 24k66 gold badges5555 silver badges9898 bronze badges asked Jun 22, 2015 at 23:32 JamesJames 11322 silver badges1212 bronze badges 2

• I can't get it to work with or without the if statement, but one problem is that window.width is undefined. You probably want window.innerWidth instead. – Caleb Commented Jun 23, 2015 at 0:19
• I would consider detecting the pointer type with modernizr instead of usins the screen size for this kind of feature, because hover effects are not very handy on tablets too. – sylvain Commented Jun 23, 2015 at 7:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can do it without any scripting language. Just try this.

@media screen and (min-width: 768px) {
  .dropdown:hover>.dropdown-menu {
    display: block;
  }
}

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand vaos" href="../index.html">VAOS</a>

    </div>
    <div id="navbar" class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li class="active"><a class="trans" href="../index.html">Home</a>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">What is VAOS <span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">
            <li><a href="options.html">VAOS & Other Options</a>
            </li>
            <li><a href="candidate.html">Am I a Candidate</a>
            </li>
            <li><a href="surgeon.html">Find a Surgeon</a>
            </li>
            <li>
              <div class="ArrowUp1"></div>
            </li>
          </ul>
        </li>
        <li><a href="experience.html">Testimonials</a>
        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resources <span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">
            <li><a href="clinical-support.html">Clinical Support</a>
            </li>
            <li><a href="videos.html">Procedural Videos</a>
            </li>
            <li><a href="resources.html">Other Links & Resources</a>
            </li>
            <li>
              <div class="ArrowUp2"></div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>

It is smooth and handy. +1 if it helps.

Use the css hover for the item with class dropdown and set the dropdown-menu class to diplay block

@media screen and (min-width: 768px) {
    li.dropdown:hover .dropdown-menu{
            display:block;
        }
    }

本文标签： javascriptBootstrap Navbar Dropdown on Hover if not mobileStack Overflow