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

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

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

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

@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 за указание на то, что нам не хватало дочернего комбинатора">", чтобы предотвратить отображение подменю на родительском наведении

В дополнение к ответу от " Моя голова болит "(что было здорово):

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

есть 2 нерешенных вопроса:

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

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

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

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

решением для (2 )является удаление верхней части поля на.выпадающее меню-селектор

.navbar .dropdown-menu {
 margin-top: 0px;
}

я использовал немного 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();
});

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

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

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

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

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

Если у вас есть элемент 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 answer, я внес некоторые изменения и добавлены некоторые дополнения, чтобы получить выпадающее меню правильно

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

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

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

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), чтобы заставить его работать через различные шаги в этом gist:https://gist.github.com/3876924

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

посмотреть блоге дополнительные.

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

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

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

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

еще лучше с 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');
});

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

$(".nav .dropdown").hover(function() {
  $(this).find(".dropdown-toggle").dropdown("toggle");
});

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

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

и он будет работать должным образом.

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

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

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

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

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

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

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

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

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

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

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

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

это ничего не делает для указывающего вверх...

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

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

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

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

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

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

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

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

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

$('.dropdown').hover(function(e){$(this).addClass('open')})

это скроет вверх те

.navbar .dropdown-menu:before {
   display:none;
}
.navbar .dropdown-menu:after {
   display:none;
}

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

@media (max-width: 768px) {
    .navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
        display: none;
    }
}

решение 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;
    }
}

перезаписать 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') })
});

}); 

вот моя техника, которая добавляет небольшую задержку перед закрытием меню после того, как вы перестанете зависать в меню или кнопке переключения. The <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);
});

увеличить Канагарайя это, Я обертываю это в медиа-запрос, чтобы предотвратить наведение при ширине дисплея XS...

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

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

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

это работает для WordPress Bootstrap:

.navbar .nav > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu:before {
    content: none;
}

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

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

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

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

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

здесь вы идете:

.caret {
    display: none !important;
}