Как сделать так, чтобы всплывающее меню Twitter Bootstrap при наведении курсора, а не при нажатии - PullRequest
Новая
       81

Как сделать так, чтобы всплывающее меню Twitter Bootstrap при наведении курсора, а не при нажатии

1122 голосов
/ 16 января 2012

Я бы хотел, чтобы меню Bootstrap автоматически выпадало при наведении курсора, а не щелкало заголовок меню. Я также хотел бы потерять маленькие стрелки рядом с заголовками меню.

Ответы [ 41 ]

2 голосов
/ 21 февраля 2019

Это работает для Bootstrap V4

JS: 

<script>
        $(function() {
            $('.dropdown-hover').hover(
                function() { $(this).addClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded', true); $(this).find('.dropdown-menu').addClass('show'); },
                function() { $(this).removeClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded',false); $(this).find('.dropdown-menu').removeClass('show'); }
            );
        });
    </script>

Vanilla Bootstrap 4 Dropdown HTML, за исключением добавления класса раскрывающегося списка: 

<div class="dropdown dropdown-hover">
<button class="btn btn-text dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ABOUT
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

Если вы не хотите выборочно включать функцию наведения с помощью класса .dropdown-hover, просто измените селектор jquery с .dropdown-hover на .dropdown.

2 голосов
/ 12 марта 2014

Итак, у вас есть этот код: 

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

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

Это работает очень хорошо, и вот объяснение: у нас есть кнопка и меню. При наведении курсора на кнопку мы отображаем меню, а когда мы находим мышку на кнопке, мы скрываем меню через 100 мс. Если вы удивляетесь, почему я это использую, вам нужно время, чтобы перетащить курсор из кнопки над меню. Когда вы находитесь в меню, время сбрасывается, и вы можете оставаться там столько раз, сколько хотите. Когда вы выйдете из меню, мы сразу же скроем меню без перерыва.

Я использовал этот код во многих проектах, если у вас возникнут какие-либо проблемы с его использованием, не стесняйтесь задавать мне вопросы.

2 голосов
/ 30 августа 2018

Очень простое решение для версии 2, только CSS. Сохраняет одинаковые функции для мобильных устройств и планшетов. 

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}
0 голосов
/ 19 июля 2018

Bootstrap v4 Solution - работает в IE

Это позволит вам переходить по ссылкам навигации верхнего уровня.

Это полное решение, использующее события mouseover и mouseleave и некоторыепроверка ширины экрана.

Это было разработано для настольных компьютеров и мобильных устройств.Не стесняйтесь изменять переменную BREAK_POINT в соответствии с вашими потребностями: D.

jQuery 

var WINDOW_WIDTH;
var BREAK_POINT = 991;

(function ($) {

    /** Set window width onload */
    WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
    /** Set window width if the browser is resized */
    $(window).resize(function () {
        WINDOW_WIDTH = $(window).width(); // Returns width of browser viewport
    });

    /** Dropdown menu on mouseenter */
    $(".nav-item.dropdown").on('mouseenter', function () {
        console.log("mouseenter");
        if (WINDOW_WIDTH >= BREAK_POINT) {
            // Open up the dropdown
            $(this).addClass('show'); // add the class show to the li parent
            $(this).children('.nav-link').removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
            $(this).children('.dropdown-menu').addClass('show'); // add the class show to the dropdown div sibling
        }
    });
    /** Dropdown menu on mouseleave */
    $(".nav-item.dropdown").on('mouseleave', function () {
        console.log("mouseleave");
        if (WINDOW_WIDTH >= BREAK_POINT) {
            // Open up the dropdown
            $(this).removeClass('show'); // add the class show to the li parent
            $(this).children('.nav-link').attr('data-toggle', 'dropdown'); // remove the data-toggle attribute so we can click and follow link
            $(this).children('.dropdown-menu').removeClass('show'); // add the class show to the dropdown div sibling
        }
    });
});

CSS 

@media(min-width:  768px) {
  .dropdown-menu {
    margin-top: 0; // fixes closing on slow mouse transition
  }
}
0 голосов
/ 04 сентября 2014

Мы видели, В дополнение к ответу от" У меня болит голова ", " Кори Цена " обнаружил две проблемы:

Проблема 1: Нажатие на раскрывающуюся ссылку откроет раскрывающееся меню.И он останется открытым, если пользователь не щелкнет где-то еще или не наведет на него курсор назад, создав неудобный пользовательский интерфейс.

Решение : Удалите элементы "class" и "data-toggle" изссылка для навигации

Решение было почти идеальным, но проблема здесь в том, что когда речь идет о мобильных устройствах и планшетах, оно не будет работать!

Я использую немного кода jQuery, чтобы исправить это .. 

if ($(window).width() > 769) {
    $('.dropdown-toggle').removeAttr('data-toggle');
    $('.dropdown-menu').removeAttr('style');
    $('.dropdown').removeClass('open');
}
$(window).resize(function () {
    if ($(window).width() > 769) {
        $('.dropdown-toggle').removeAttr('data-toggle');
        $('.dropdown-menu').removeAttr('style');
        $('.dropdown').removeClass('open');
    }
    else {
        $('.dropdown-toggle').attr("data-toggle", "dropdown");
    }
});

Примечание : Здесь мы предполагаем, что падение на мобильных устройствах и планшетах происходит от 768 пикселей.

0 голосов
/ 23 февраля 2018

Добавление этого для тех, кто хочет функциональность по умолчанию на мобильных устройствах. Можно установить min-width: ... как требуется 

@media only screen and (min-width: 1195px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
  ul.nav li.dropdown> ul.dropdown-menu {
    display: none;
  }
}

настройка display: none, чтобы dropdown-toggle не создавала проблему. Если вы оставите все как есть, одновременно могут быть открыты два раскрывающихся списка.

0 голосов
/ 25 июля 2017

Самый стандартный ответ:

  • Поддерживает расширенный атрибут aria
  • Поддерживает не сенсорные устройства
  • Поддерживает сенсорные устройства
  • Поддерживает все выпадающие списки 
var isTouchDevice =
    (('ontouchstart' in window) ||
    (navigator.MaxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0));
if(!isTouchDevice){
    // open dropdowns on hover on non mobile devices
    $(".dropdown").hover(function() {
        $('.dropdown-toggle', this).dropdown("toggle");
    });
}

Вы можете изменить $(".dropdown") на определенную область, если вам нужно: 

$("#top-menu .dropdown")
0 голосов
/ 19 июля 2017 

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

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

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>
0 голосов
/ 06 июля 2017 
 <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <script>
        $('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);
        });
      </script>
0 голосов
/ 24 февраля 2017

Надеюсь, это поможет.Проверьте ссылку https://jsfiddle.net/awb7gfb1/

<nav>
    <div id="menubar" class=" collapse navbar-collapse row">
        <ul id="dropdownNavbar" class="nav navbar-nav">
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-time"></span>
                Time Card
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a id="showTimeCard" href="#">My Time Card</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                    <a href="#">Sub Menu 5</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-stats"></span>
                Project
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn"><span class="glyphicon glyphicon-user"></span>
                HR Links
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-screenshot"></span>
                Leave Tracker
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-briefcase"></span>
                Accounts
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                    <a href="#">Sub Menu 5</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-headphones"></span>
                Service Desk
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-file"></span>
                Reports
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                    <a href="#">Sub Menu 4</a>
                    <a href="#">Sub Menu 5</a>
                </div>
            </li>
            <li class="dropdown">
                <button type="button" class="btn btn-primary dropbtn">
                <span class="glyphicon glyphicon-cog"></span>
                Settings
                <span class="caret"></span></button>
                <div class="dropdown-content">
                    <a href="#">Sub Menu 1</a>
                    <a href="#">Sub Menu 2</a>
                    <a href="#">Sub Menu 3</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

и CSS 

.dropdown {
    float: left;
    padding-right: 1px;
}

.dropbtn{
    border: 0px;
    height: 30px;
    border-radius: 0px 10px;
}
li button, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
}

li button:hover, .dropdown:hover .dropbtn {
    background-color: #12A5F4;
}

.dropbtn.active {
    background: #12A5F4;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #e8f3f4;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.navbar-header{
    overflow: visible;
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 5px 10px;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #d8dee2
}

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

#menubar{
    padding-top: 5px;
    overflow: visible;
    z-index: 10;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
}

#dropdownNavbar{
    margin: 0px;
}

.navbar-toggle{
    background-color: #3382d5;
}
.navbar-toggle span{
    background-color: white;
}
Страница:
...