Bootstrap เลื่อนลงด้วย Hover

ตกลงดังนั้นสิ่งที่ฉันต้องการค่อนข้างตรงไปตรงมา

ฉันได้ตั้งค่าแถบนำทางพร้อมกับเมนูแบบเลื่อนลงบางรายการ (ใช้class="dropdown-toggle" data-toggle="dropdown") และใช้งานได้ดี

มันใช้งานได้ " onClick" ในขณะที่ฉันต้องการถ้ามันใช้งานได้ " onHover"

มีวิธีใดในการทำเช่นนี้?

ทางออกที่ง่ายที่สุดจะอยู่ใน CSS เพิ่มสิ่งที่ชอบ ...

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

Fiddle ทำงาน

วิธีที่ดีที่สุดในการทำคือเพียงแค่ทริกเกอร์เหตุการณ์การคลิกบูตด้วยการโฮเวอร์ ด้วยวิธีนี้มันควรจะยังคงเป็นอุปกรณ์สัมผัสที่เป็นมิตร

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

คุณสามารถใช้ฟังก์ชันโฮเวอร์ของ jQuery

คุณเพียงแค่ต้องเพิ่มชั้นเรียนopenเมื่อเมาส์เข้ามาและลบชั้นเรียนเมื่อเมาส์ออกจากรายการแบบเลื่อนลง

นี่คือรหัสของฉัน:

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

วิธีง่ายๆในการใช้ jQuery คือ:

$(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);
    });  
});

สำหรับ CSS มันจะบ้าเมื่อคุณคลิกด้วย นี่คือรหัสที่ฉันใช้มันยังไม่เปลี่ยนแปลงอะไรเลยสำหรับมุมมองอุปกรณ์เคลื่อนที่

$('.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');
        }
    }
});

ใน Twitter Bootstrap ไม่มีการใช้งานแต่คุณสามารถใช้ปลั๊กอินนี้ได้

อัปเดต 1:

ถามคำถามที่นี่

โฮเวอร์เหนือรายการ nav เพื่อดูว่าพวกเขาเปิดใช้งานเมื่อโฮเวอร์ http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

ดังนั้นคุณมีรหัสนี้:

<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>

โดยปกติจะใช้งานได้กับเหตุการณ์การคลิกและคุณต้องการให้มันทำงานกับเหตุการณ์การโฮเวอร์ ง่ายมากเพียงใช้ 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();
        })
    })
})

มันใช้งานได้ดีมากและนี่คือคำอธิบาย: เรามีปุ่มและเมนู เมื่อเราเลื่อนปุ่มเราจะแสดงเมนูและเมื่อเราเลื่อนเมาส์ไปที่ปุ่มเราจะซ่อนเมนูหลังจาก 100ms หากคุณสงสัยว่าทำไมฉันถึงใช้มันเป็นเพราะคุณต้องการเวลาลากเคอร์เซอร์จากปุ่มบนเมนู เมื่อคุณอยู่ในเมนูเวลาจะถูกรีเซ็ตและคุณสามารถอยู่ได้นานเท่าที่คุณต้องการ เมื่อคุณออกจากเมนูเราจะซ่อนเมนูทันทีโดยไม่ต้องหยุดพัก

ฉันใช้รหัสนี้ในหลายโครงการหากคุณพบปัญหาในการใช้รหัสนี้โปรดถามฉัน

นี่คือสิ่งที่ฉันใช้เพื่อทำให้แบบเลื่อนลงเมื่อเลื่อนผ่าน 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');
    });
});

ลองใช้ฟังก์ชันโฮเวอร์กับภาพเคลื่อนไหว fadein fadeout

$('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);
});

สิ่งนี้จะช่วยคุณสร้างคลาสโฮเวอร์ของคุณเองสำหรับ bootstrap:

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;
}

ตั้งค่าระยะขอบเพื่อหลีกเลี่ยงการปิดที่ไม่พึงประสงค์และเป็นตัวเลือก

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>

อย่าลืมลบปุ่มแอตทริบิวต์data-toggle = "dropdown"หากคุณต้องการที่จะลบ onclick open และสิ่งนี้จะใช้ได้เมื่ออินพุตถูกต่อท้ายด้วยดรอปดาวน์

สิ่งนี้จะวนเวียนไว้ที่แถบนำทางเมื่อคุณไม่ได้ใช้อุปกรณ์มือถือเท่านั้นเนื่องจากฉันพบว่าการเลื่อนไปที่การนำทางนั้นทำงานได้ไม่ดีกับอุปกรณ์มือถือ:

    $( 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' );
        }
    });

});

ฉันลองวิธีแก้ปัญหาอื่น ๆ ฉันใช้ bootstrap 3 แต่เมนูแบบเลื่อนลงปิดเร็วเกินไปที่จะเลื่อนไป

คาดว่าคุณจะเพิ่ม class = "dropdown" ลงใน li ฉันได้เพิ่มการหมดเวลา

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

อัปเดตด้วยปลั๊กอินที่เหมาะสม

ฉันได้เผยแพร่ปลั๊กอินที่เหมาะสมสำหรับฟังก์ชั่นการเลื่อนเมาส์ลงซึ่งคุณสามารถกำหนดสิ่งที่จะเกิดขึ้นได้เมื่อคลิกที่dropdown-toggleองค์ประกอบ:

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

ทำไมฉันทำมันเมื่อมีวิธีแก้ปัญหามากมายอยู่แล้ว?

ฉันมีปัญหากับโซลูชันที่มีอยู่ก่อนหน้านี้ทั้งหมด CSS ง่าย ๆ ไม่ได้ใช้.openคลาสบน.dropdownดังนั้นจะไม่มีความคิดเห็นเกี่ยวกับองค์ประกอบสลับแบบเลื่อนลงเมื่อมองเห็นรายการแบบเลื่อนลง

js กำลังรบกวนการคลิก .dropdown-toggleเพื่อให้ดรอปดาวน์ปรากฏขึ้นเมื่อโฮเวอร์แล้วซ่อนเมื่อคลิกที่ดรอปดาวน์ที่เปิดอยู่และการเลื่อนเมาส์ออกไปจะเป็นการกระตุ้นให้ดรอปดาวน์ปรากฏขึ้นอีกครั้ง โซลูชัน js บางตัวใช้การเข้ากันได้กับ iOS ปลั๊กอินบางตัวไม่ทำงานบนเบราว์เซอร์เดสก์ท็อปสมัยใหม่ซึ่งรองรับกิจกรรมการสัมผัส

นั่นเป็นเหตุผลที่ฉันสร้างปลั๊กอินBootstrap Dropdown Hoverซึ่งป้องกันปัญหาเหล่านี้โดยใช้เฉพาะมาตรฐาน Bootstrap javascript API โดยไม่ต้องแฮ็ค

    $('.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)
    });

การทริกเกอร์clickเหตุการณ์ที่hoverมีข้อผิดพลาดเล็กน้อย ถ้าmouse-inและจากนั้นclickสร้างผลกระทบในทางกลับกัน มันopensเมื่อmouse-outและเมื่อclose mouse-inทางออกที่ดีกว่า:

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

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

วิธีการแก้ปัญหาที่ผมกำลังเสนอตรวจพบว่ามันไม่ได้สัมผัสอุปกรณ์และที่navbar-toggle(เมนูแฮมเบอร์เกอร์) ไม่สามารถมองเห็นและทำให้ผู้ปกครองเมนูรายการเมนูย่อยเปิดเผยเกี่ยวกับการเลื่อนและและทำตามลิงค์ที่มีต่อคลิก

ทำให้ tne margin-top 0 เนื่องจากช่องว่างระหว่าง navbar และเมนูในเบราว์เซอร์บางตัวจะไม่ยอมให้คุณโฮเวอร์ไปที่ subitems

$(function(){
    function is_touch_device() {
        return 'ontouchstart' in window        // works on most browsers 
        || navigator.maxTouchPoints;       // works on IE10/11 and Surface
    };

    if(!is_touch_device() && $('.navbar-toggle:hidden')){
      $('.dropdown-menu', this).css('margin-top',0);
      $('.dropdown').hover(function(){ 
          $('.dropdown-toggle', this).trigger('click').toggleClass("disabled"); 
      });			
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

$(function(){
  $("#nav .dropdown").hover(
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
      $(this).toggleClass('open');
    },
    function() {
      $('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
      $(this).toggleClass('open');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
    <li><a href="#">menuA</a></li>
    <li><a href="#">menuB</a></li>
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">menuC</a>
        <ul id="products-menu" class="dropdown-menu clearfix" role="menu">
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
        </ul>
    </li>
    <li><a href="#">menuD</a></li>
    <li><a href="#">menuE</a></li>
</ul>

รายการแบบหล่นลง Bootstrap ทำงานบนโฮเวอร์และยังคงปิดเมื่อคลิกโดยการเพิ่มการแสดงคุณสมบัติ: block; ใน css และลบคุณลักษณะเหล่านี้data-toggle = "dropdown" role = "button"จากแท็กปุ่ม

.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
    <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>