Bootstrap Dropdown met Hover

Ok, dus wat ik nodig heb is vrij eenvoudig.

Ik heb een navigatiebalk opgezet met een aantal vervolgkeuzemenu’s erin (met behulp van class="dropdown-toggle" data-toggle="dropdown"), en het werkt prima.

Het punt is dat het “onClick” werkt, terwijl ik liever zou hebben dat het “onHover” zou werken.

Is er een ingebouwde manier om dit te doen?

Antwoord 1, autoriteit 100%

De eenvoudigste oplossing zou in CSS zijn. Voeg iets toe als…

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

Werkende viool

Antwoord 2, autoriteit 18%

De beste manier om dit te doen, is door de bootstrap-klikgebeurtenis te activeren met een muisaanwijzer. Op deze manier moet het toch apparaatvriendelijk blijven

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

Antwoord 3, autoriteit 16%

Je kunt de hover-functie van jQuery gebruiken.

Je hoeft alleen de klasse opentoe te voegen wanneer de muis binnenkomt en de klasse te verwijderen wanneer de muis de vervolgkeuzelijst verlaat.

Hier is mijn code:

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

Antwoord 4, autoriteit 7%

Een gemakkelijke manier, met behulp van jQuery, is deze:

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

Antwoord 5, autoriteit 2%

Voor CSS wordt het gek als je er ook op klikt. Dit is de code die ik gebruik, het verandert ook niets voor mobiele weergave.

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

Antwoord 6, autoriteit 2%

In Twitter is Bootstrap niet geïmplementeerdmaar je kunt de deze plug-in

Update 1:

Dezelfde vraag hier

Antwoord 7, autoriteit 2%

Beweeg over de navigatie-items om te zien dat ze worden geactiveerd bij de muisaanwijzer.
http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

Antwoord 8, autoriteit 2%

Dus je hebt deze code:

<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
    <li>Link 1</li>
    <li>Link 2</li> 
    <li>Link 3</li>                                             
</ul>

Normaal gesproken werkt het bij een klikgebeurtenis en u wilt dat het werkt bij een zweefgebeurtenis. Dit is heel eenvoudig, gebruik gewoon deze javascript/jQuery-code:

$(document).ready(function () {
    $('.dropdown-toggle').mouseover(function() {
        $('.dropdown-menu').show();
    })
    $('.dropdown-toggle').mouseout(function() {
        t = setTimeout(function() {
            $('.dropdown-menu').hide();
        }, 100);
        $('.dropdown-menu').on('mouseenter', function() {
            $('.dropdown-menu').show();
            clearTimeout(t);
        }).on('mouseleave', function() {
            $('.dropdown-menu').hide();
        })
    })
})

Dit werkt heel goed en hier is de uitleg: we hebben een knop en een menu. Als we de knop aanwijzen, geven we het menu weer, en als we de knop weghalen, verbergen we het menu na 100 ms. Als je je afvraagt ​​waarom ik dat gebruik, is dat omdat je tijd nodig hebt om de cursor van de knop over het menu te slepen. Als je op het menu staat, wordt de tijd opnieuw ingesteld en kun je daar zo lang blijven als je wilt. Wanneer u het menu verlaat, zullen we het menu onmiddellijk verbergen zonder enige time-out.

Ik heb deze code in veel projecten gebruikt. Stel me gerust vragen als je problemen ondervindt bij het gebruik ervan.

Antwoord 9

Dit is wat ik gebruik om er een dropdown-menu van te maken bij de muisaanwijzer met wat jQuery

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

Antwoord 10

Bijgewerkt met een goede plug-in

Ik heb een goede plug-in gepubliceerd voor de dropdown-hoverfunctie, waarin je zelfs kunt definiëren wat er gebeurt als je op het dropdown-toggle-element klikt:

https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover

Waarom ik het heb gehaald, terwijl er al veel oplossingen zijn?

Ik had problemen met alle eerder bestaande oplossingen. De eenvoudige CSS-versies gebruiken de klasse .openniet in de .dropdown, dus er zal geen feedback zijn op het dropdown-schakelelement wanneer de dropdown zichtbaar is.

De js-versies interfereren met het klikken op .dropdown-toggle, dus de vervolgkeuzelijst verschijnt bij zweven en verbergt deze vervolgens wanneer u op een geopende vervolgkeuzelijst klikt, en als u de muis verlaat, wordt de vervolgkeuzelijst geactiveerd om weer te verschijnen. Sommige js-oplossingen remmen de compatibiliteit met iOS, sommige plug-ins werken niet in moderne desktopbrowsers die de aanraakgebeurtenissen ondersteunen.

Daarom heb ik de plug-in Bootstrap Dropdown Hovergemaakt die al deze problemen voorkomt door alleen de standaard Bootstrap javascript API te gebruiken, zonder enige hack.

Antwoord 11

Probeer dit met de hover-functie met fade-in-fadeout-animaties

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

Antwoord 12

Hiermee kunt u uw eigen hover-klasse voor bootstrap maken:

CSS:

/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
   display: block;
}

Marges zijn ingesteld om ongewenst sluiten te voorkomen en zijn optioneel.

HTML:

<div class="btn-group hover_drop_down">
  <button type="button" class="btn btn-default" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

Vergeet niet het knopkenmerk data-toggle=”dropdown”te verwijderen als u onclick open wilt verwijderen, en dit werkt ook wanneer invoer wordt toegevoegd met dropdown.

Antwoord 13

Dit laat de navigatiebalk alleen zweven als je niet op een mobiel apparaat zit, omdat ik vind dat het zweven van de navigatie niet goed werkt op mobiele apparaten:

   $( document ).ready(function() {
    $( 'ul.nav li.dropdown' ).hover(function() {
        // you could also use this condition: $( window ).width() >= 768
        if ($('.navbar-toggle').css('display') === 'none' 
            && false === ('ontouchstart' in document)) {
            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    }, function() {
        if ($('.navbar-toggle').css('display') === 'none'
            && false === ('ontouchstart' in document)) {
            $( '.dropdown-toggle', this ).trigger( 'click' );
        }
    });
});

Antwoord 14

Ik probeer andere oplossingen, ik gebruik bootstrap 3, maar het vervolgkeuzemenu sluit te snel om eroverheen te gaan

verondersteld dat je class=”dropdown” aan li zou toevoegen, dan heb ik een time-out toegevoegd

var hoverTimeout;
$('.dropdown').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('open');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('open');
    }, 150);
});

Antwoord 15

Het activeren van een click-gebeurtenis met een hoverheeft een kleine fout. Als mouse-inen vervolgens een clickzorgt voor een omgekeerd effect. Het openswanneer mouse-outen closewanneer mouse-in. Een betere oplossing:

$('.dropdown').hover(function() {
    if (!($(this).hasClass('open'))) {
        $('.dropdown-toggle', this).trigger('click');
    }
}, function() {
    if ($(this).hasClass('open')) {
        $('.dropdown-toggle', this).trigger('click');
    }
});

Antwoord 16

   $('.navbar .dropdown').hover(function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
    }, function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
    });

Antwoord 17

html

       <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Dropdown Example <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </div> 

jquery

       $(document).ready( function() {                
            /* $(selector).hover( inFunction, outFunction ) */
            $('.dropdown').hover( 
                function() {                        
                    $(this).find('ul').css({
                        "display": "block",
                        "margin-top": 0
                    });                        
                }, 
                function() {                        
                    $(this).find('ul').css({
                        "display": "none",
                        "margin-top": 0
                    });                        
                } 
            );
        });

codepen

Antwoord 18

Bootstrap-vervolgkeuzelijst Werk aan de muisaanwijzer en blijf dicht bij de klik door eigenschap display:block;toe te voegen in css en deze attributen te verwijderen data-toggle=”dropdown”role=”button”van knoptag

.dropdown:hover .dropdown-menu {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">                                     
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle">Dropdown Example</button>
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>
</body>
</html>

$(".dropdown-toggle").mouseover(function(){
    $(this).trigger('click');
})

$('.dropdown').on('mouseover', function(){
    $(this).addClass('show');
    $('.dropdown-menu').addClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'true');
});
$('.dropdown').on('mouseout', function(){
    $(this).removeClass('show');
    $('.dropdown-menu').removeClass('show');
    $('.dropdown-toggle').attr('aria-expanded', 'false');
});

<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
  <div class="container" style="width:100%;">
    <div class="navbar-header" style="height:90px;">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
        <img src="material/logo.png" width="160px;" alt="visoka">
      </a>
      <a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
        <img src="material/logo.png" width="200px;">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
      <ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">
        <li><a href="index.html" style="font-family: Inter !important;">HOME</a></li>
        <li><a href="About-Us.html" style="font-family: Inter !important;">ABOUT US</a></li>
        <li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
        <a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="Projects.html#ongoing" style="font-family: Inter !important;">Ongoing Projects</a></li><br>
          <li><a href="Projects.html#completed" style="font-family: Inter !important;">Completed Projects</a></li><br>
          <li><a href="Projects.html#upcoming" style="font-family: Inter !important;">Upcoming Projects</a></li>
        </ul>
      </li>
      </ul>
    </div>
  </div>
</nav>

 <script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}
function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>