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

1231
falter 16 Янв 2012 в 13:36

30 ответов

Лучший ответ

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

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.sidebar-nav {
  padding: 9px 0;
}

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}

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

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}

.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <form action="" class="navbar-search pull-left">
          <input type="text" placeholder="Search" class="search-query span2">
        </form>
        <ul class="nav pull-right">
          <li><a href="#">Link</a></li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a class="#" href="#">Menu</a>
          </li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
  </div>
</div>

<hr>

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
        <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
        <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </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>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
</ul>

Демо

611
Peter Mortensen 29 Июл 2017 в 18:18

Это тоже возможно.


$('.dropdown').on('mouseover',function(){
    $(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
    $(this).find('.dropdown-menu').hide();
});

Если в раскрывающемся списке есть промежуток между зависшими элементами, раскрывающийся список немедленно закроется, как показано на этом GIF-изображении.

Dropdown hiding as soon as the element is cleared

Чтобы предотвратить такое поведение, вы можете добавить тайм-аут для событий в 100 мс.

let dropdownTimer;
$('.dropdown').on('mouseover', () => {
    clearTimeout(dropdownTimer)
    $(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave', () =>{
    dropdownTimer = setTimeout(() => {
        $(this).find('.dropdown-menu').hide();
    }, 100)
});

Dropdown holding open for a set timeout

5
Jack Rogers 15 Авг 2020 в 06:20

Я опубликовал соответствующий плагин для раскрывающегося меню Bootstrap 3, в котором вы даже можете определить, что происходит при нажатии на элемент dropdown-toggle (щелчок можно отключить):

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


Зачем я это сделал, когда решений уже много?

У меня были проблемы со всеми ранее существовавшими решениями. Простые CSS-классы не используют класс .open в .dropdown, поэтому при отображении раскрывающегося списка обратной связи не будет.

Js-файлы мешают щелчку по .dropdown-toggle, поэтому раскрывающийся список появляется при наведении курсора, затем скрывает его при щелчке по открытому раскрывающемуся списку, а перемещение мыши приведет к тому, что раскрывающийся список снова появится. Некоторые из js-решений нарушают совместимость с iOS, некоторые плагины не работают в современных настольных браузерах, которые поддерживают события касания.

Вот почему я создал плагин Bootstrap Dropdown Hover который предотвращает все эти проблемы, используя только стандартный javascript API Bootstrap, без какого-либо взлома . Даже атрибуты Aria отлично работают с этим плагином.

5
Zub 25 Янв 2018 в 01:49

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

<b class="caret"></b>

Хотя это ничего не делает для направленного вверх ...

5
Peter Mortensen 29 Июл 2017 в 18:20

Также добавлено margin-top: 0 для сброса поля начальной загрузки css для .dropdown-menu, чтобы список меню не исчезал, когда пользователь медленно наводит курсор от выпадающего меню к списку меню.

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.nav .dropdown-menu {
    margin-top: 0;
}
5
Sudharshan 14 Май 2014 в 12:05

У меня это получилось следующим образом:

$('ul.nav li.dropdown').hover(function(){
       $(this).children('ul.dropdown-menu').slideDown(); 
    }, function(){
       $(this).children('ul.dropdown-menu').slideUp(); 
});

Я надеюсь, что это поможет кому-то...

7
Peter Mortensen 29 Июл 2017 в 18:30

Лучший способ сделать это - просто запустить событие click Bootstrap при наведении курсора. Таким образом, он по-прежнему должен оставаться удобным для сенсорных устройств.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});
8
Peter Mortensen 29 Июл 2017 в 18:31

На мой взгляд, лучший способ такой:

;(function($, window, undefined) {
    // Outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // If instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // The element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this),
                $parent = $this.parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                settings = $.extend(true, {}, defaults, options, data),
                timeout;

            $parent.hover(function(event) {

                // So a neighbor can't open the dropdown
                if(!$parent.hasClass('open') && !$this.is(event.target)) {
                    return true;
                }

                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $parent.removeClass('open');
                }, settings.delay);
            });

            // This helps with button groups!
            $this.hover(function() {
                if(settings.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $parent.addClass('open');
            });

            // Handle submenus
            $parent.find('.dropdown-submenu').each(function(){
                var $this = $(this);
                var subTimeout;
                $this.hover(function() {
                    window.clearTimeout(subTimeout);
                    $this.children('.dropdown-menu').show();

                    // Always close submenu siblings instantly
                    $this.siblings().children('.dropdown-menu').hide();
                }, function() {
                    var $submenu = $this.children('.dropdown-menu');
                    subTimeout = window.setTimeout(function() {
                        $submenu.hide();
                    }, settings.delay);
                });
            });
        });
    };

    $(document).ready(function() {
        // apply dropdownHover to all elements with the data-hover="dropdown" attribute
        $('[data-hover="dropdown"]').dropdownHover();
    });
})(jQuery, this);

Образец разметки:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>
8
Peter Mortensen 29 Июл 2017 в 18:30

Вы можете использовать метод $().dropdown('toggle') по умолчанию для переключения раскрывающегося меню при наведении курсора:

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});
9
sdvnksv 23 Сен 2015 в 08:47

Просто хочу добавить, что если у вас есть несколько раскрывающихся списков (как у меня), вы должны написать:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

И он будет работать нормально.

10
johannchopin 19 Апр 2020 в 10:46

Еще лучше с jQuery:

jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).show();
  jQuery(this).addClass('open');
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).hide();
  jQuery(this).removeClass('open');
});
10
caarlos0 17 Авг 2012 в 01:51

Это встроено в Bootstrap 3. Просто добавьте это в свой CSS:

.dropdown:hover .dropdown-menu {
    display: block;
}
16
johannchopin 19 Апр 2020 в 10:45

Это сработало для меня:

.dropdown:hover .dropdown-menu {
    display: block;
}
18
johannchopin 19 Апр 2020 в 10:46

Чтобы улучшить ответ Судхаршана, я заключил это в медиа-запрос, чтобы предотвратить наведение курсора при ширине экрана XS ...

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

    .nav .dropdown-menu {
        margin-top: 0;
    }
}

Кроме того, каретка в разметке не требуется, только класс раскрывающегося списка для li .

2
Community 23 Май 2017 в 11:47

Вот мой метод, который добавляет небольшую задержку перед закрытием меню после того, как вы перестанете наводить курсор на меню или кнопку переключения. <button>, который вы обычно нажимаете для отображения меню навигации, это #nav_dropdown.

$(function() {
  var delay_close_it, nav_menu_timeout, open_it;
  nav_menu_timeout = void 0;
  open_it = function() {
    if (nav_menu_timeout) {
      clearTimeout(nav_menu_timeout);
      nav_menu_timeout = null;
    }
    return $('.navbar .dropdown').addClass('open');
  };
  delay_close_it = function() {
    var close_it;
    close_it = function() {
      return $('.navbar .dropdown').removeClass('open');
    };
    return nav_menu_timeout = setTimeout(close_it, 500);
  };
  $('body').on('mouseover', '#nav_dropdown, #nav_dropdown *', open_it).on('mouseout', '#nav_dropdown', delay_close_it);
  return $('body').on('mouseover', '.navbar .dropdown .dropdown-menu', open_it).on('mouseout', '.navbar .dropdown .dropdown-menu', delay_close_it);
});
2
Sarah Vessels 18 Фев 2014 в 19:43

Замените bootstrap.js этим скриптом.

jQuery(document).ready(function ($) {
$('.navbar .dropdown').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

$('.dropdown-submenu').hover(function() {
    $(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
    var na = $(this)
    na.find('.dropdown-menu').first().stop(true, true).delay(100).slideUp('fast', function(){ na.removeClass('extra-nav-class') })
});

}); 
2
Hari Krishnan 22 Янв 2014 в 05:53

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

@media (min-width: 980px) {
    .dropdown:hover .dropdown-menu {
       display: block;
    }
}
3
Kash 30 Авг 2018 в 09:41

Решение jQuery хорошее, но ему нужно будет иметь дело с событиями щелчка (для мобильных устройств или планшетов), так как наведение не будет работать должным образом ... Может быть, может быть обнаружено изменение размера окна?

Ответ Андреса Ильича, похоже, работает хорошо, но его следует обернуть в медиа-запрос:

@media (min-width: 980px) {

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

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

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
}
3
Peter Mortensen 29 Июл 2017 в 18:23

Это должно скрыть раскрывающиеся списки и их курсоры, если они меньше планшета.

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}
3
Josh Crozier 17 Окт 2013 в 22:12

Это скроет те

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}
3
allochi 11 Апр 2012 в 16:26

Это работает для 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>

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

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

4
Drew 20 Фев 2019 в 22:51
$('.dropdown').hover(function(e){$(this).addClass('open')})
4
Nikolay Kostov 14 Фев 2017 в 13:45

Используйте этот код, чтобы открыть подменю при наведении указателя мыши (только на рабочем столе):

$('ul.nav li.dropdown').hover(function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').show();
    }
}, function () {
    if ($(window).width() > 767) {
        $(this).find('.dropdown-menu').hide().css('display','');
    }
});

И если вы хотите, чтобы меню первого уровня было интерактивным, даже на мобильном телефоне, добавьте это:

    $('.dropdown-toggle').click(function() {
    if ($(this).next('.dropdown-menu').is(':visible')) {
        window.location = $(this).attr('href');
    }
});

Подменю (раскрывающееся меню) открывается при наведении курсора на рабочий стол и щелчком / касанием на мобильном устройстве и планшете. После того, как подменю было открыто, второй щелчок позволит вам открыть ссылку. Благодаря if ($(window).width() > 767) подменю займет всю ширину экрана на мобильном устройстве.

4
Jibato 10 Янв 2017 в 15:53

[Обновление] Плагин находится на GitHub, и я Я работаю над некоторыми улучшениями (например, использование только с атрибутами данных (JS не требуется). Я оставил код ниже, но он не такой, как на GitHub.

Мне понравилась чистая версия CSS, но приятно иметь задержку перед ее закрытием, так как обычно это лучше для пользователя (т.е. не наказывается за скольжение мыши, которое выходит на 1 пиксель за пределы раскрывающегося списка и т. Д.), И, как упоминалось в комментариях , есть 1 пиксель поля, с которым вам нужно иметь дело, или иногда навигация неожиданно закрывается, когда вы переходите к раскрывающемуся списку от исходной кнопки и т. д.

Я создал небольшой плагин, который использовал на нескольких сайтах, и он отлично работал. Каждый элемент навигации обрабатывается независимо, поэтому у них есть собственные таймеры задержки и т. Д.

JS

// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();

// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {

    // the element we really care about
    // is the dropdown-toggle's parent
    $allDropdowns = $allDropdowns.add(this.parent());

    return this.each(function() {
        var $this = $(this).parent(),
            defaults = {
                delay: 500,
                instantlyCloseOthers: true
            },
            data = {
                delay: $(this).data('delay'),
                instantlyCloseOthers: $(this).data('close-others')
            },
            options = $.extend(true, {}, defaults, options, data),
            timeout;

        $this.hover(function() {
            if(options.instantlyCloseOthers === true)
                $allDropdowns.removeClass('open');

            window.clearTimeout(timeout);
            $(this).addClass('open');
        }, function() {
            timeout = window.setTimeout(function() {
                $this.removeClass('open');
            }, options.delay);
        });
    });
};  

Параметр delay говорит сам за себя, а instantlyCloseOthers мгновенно закроет все остальные раскрывающиеся списки, которые открываются при наведении курсора на новое.

Не чистый CSS, но, надеюсь, поможет кому-то еще в столь поздний час (т.е.это старый поток).

Если хотите, вы можете увидеть различные процессы, через которые я прошел (в обсуждении #concrete5 IRC), чтобы заставить его работать, с помощью различных шагов в этой сути: https://gist.github.com/3876924

Подход с использованием шаблонов плагинов намного чище, поскольку он поддерживает отдельные таймеры и т. Д.

Дополнительную информацию см. В сообщении в блоге.

20
CWSpear 26 Окт 2012 в 19:56

Если у вас есть элемент с таким классом dropdown (например):

<ul class="list-unstyled list-inline">
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
        <ul class="dropdown-menu">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
        <ul class="dropdown-menu">
            <li><a href="">Item A</a></li>
            <li><a href="">Item B</a></li>
            <li><a href="">Item C</a></li>
            <li><a href="">Item D</a></li>
            <li><a href="">Item E</a></li>
        </ul>
    </li>
</ul>

Затем вы можете настроить автоматическое раскрытие раскрывающегося меню при наведении курсора вместо того, чтобы щелкать его заголовок, используя этот фрагмент кода jQuery:

<script>
    $('.dropdown').hover(
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
        },
        function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        }
    );

    $('.dropdown-menu').hover(
        function() {
            $(this).stop(true, true);
        },
        function() {
            $(this).stop(true, true).delay(200).fadeOut();
        }
    );
</script>

Вот демо

Этот ответ основан на ответе @Michael, я внес некоторые изменения и добавил некоторые дополнения, чтобы раскрывающееся меню работало. правильно

22
Peter Mortensen 29 Июл 2017 в 18:38

Здесь есть много действительно хороших решений. Но я подумал, что пойду и поставлю здесь свою в качестве альтернативы. Это простой фрагмент jQuery, который делает это так же, как при начальной загрузке, если бы он поддерживал наведение для раскрывающихся списков вместо простого щелчка. Я тестировал это только с версией 3, поэтому не знаю, будет ли он работать с версией 2. Сохраните его как фрагмент в своем редакторе и получите одним нажатием клавиши.

<script>
    $(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
    });
</script>

По сути, он просто говорит, что когда вы наводите курсор на раскрывающийся класс, он добавляет к нему открытый класс. Тогда это просто работает. Когда вы перестаете наводить курсор на родительский li с раскрывающимся классом или дочерний ul / li, он удаляет открытый класс. Очевидно, что это только одно из многих решений, и вы можете добавить к нему, чтобы он работал только с определенными экземплярами .dropdown. Или добавьте переход к родительскому или дочернему.

71
GeoffCodesThings 31 Янв 2014 в 17:28

Просто настройте свой стиль CSS в трех строках кода

.dropdown:hover .dropdown-menu {
   display: block;
}
74
johannchopin 19 Апр 2020 в 10:45

Я использовал немного jQuery:

// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
134
Peter Mortensen 29 Июл 2017 в 18:21

В дополнение к ответу "My Head Hurts" (который был великолепен):

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

Есть 2 нерешенных проблемы:

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

Решение (1) заключается в удалении элементов "class" и "data-toggle" из навигационной ссылки.

<a href="#">
     Dropdown
     <b class="caret"></b>
</a>

Это также дает вам возможность создать ссылку на вашу родительскую страницу, что было невозможно с реализацией по умолчанию. Вы можете просто заменить «#» на любую страницу, которую хотите отправить пользователю.

Решение (2) - удалить верхнюю границу поля в селекторе .dropdown-menu.

.navbar .dropdown-menu {
    margin-top: 0px;
}
232
johannchopin 19 Апр 2020 в 10:44

Чтобы меню автоматически выпадало при наведении курсора, это можно сделать с помощью базового CSS. Вам нужно настроить селектор для скрытого пункта меню, а затем настроить его отображение в виде блока при наведении курсора на соответствующий тег li. Взяв пример со страницы начальной загрузки twitter, селектор будет следующим:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

Однако, если вы используете адаптивные функции Bootstrap, вам не нужна эта функция на свернутой панели навигации (на экранах меньшего размера). Чтобы этого избежать, оберните приведенный выше код в медиа-запрос:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Чтобы скрыть стрелку (каретку), это делается по-разному в зависимости от того, используете ли вы Twitter Bootstrap версии 2 и ниже или версии 3:

Bootstrap 3

Чтобы удалить каретку в версии 3, вам просто нужно удалить HTML <b class="caret"></b> из элемента привязки .dropdown-toggle:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
    <b class="caret"></b>    <-- remove this line
</a>

Bootstrap 2 и ниже

Чтобы удалить каретку в версии 2, вам нужно немного больше узнать о CSS, и я предлагаю более подробно изучить, как работает псевдоэлемент :after. Чтобы начать свой путь к пониманию, для нацеливания и удаления стрелок в примере начальной загрузки twitter, вы должны использовать следующий селектор и код CSS:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

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

Спасибо @CocaAkat за указание на отсутствие дочернего комбинатора ">" для предотвращения отображения подменю при наведении курсора на родительский

916
Travis 22 Апр 2015 в 19:28