Раскрывающиеся списки Bootstrap 3: при наведении и щелчке

почти все ссылки на моем navbar являются выпадающими. Я хотел бы, чтобы они появлялись при наведении для больших экранов, но при щелчке для меньших экранов. Это возможно? В поисках ответа я наткнулся на следующее:--1-->меню начальной загрузки: выпадающее меню при наведении только для рабочего стола. Это не работает для меня, потому что я не хочу, чтобы весь раскрывающийся список был невидимым на мобильном телефоне; я бы хотел, чтобы он был виден только при щелчке, а не при наведении.

6
css html jquery responsive-design twitter-bootstrap-3

8 ответов

редактировать Ответ от @ouwen-huang в порядке, но так как jQuery является зависимостью для bootstrap.js, вы также можете сделать это способом jQuery, просто добавив все события, которые вы хотите прикрепить к кавычкам, разделенным пробелом:

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});

селекторы основаны на стандартной разметке начальной загрузки, взятой непосредственно из документов, например:

<li class="dropdown">
    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
    </ul>
</li>

дело в том, что если вы находитесь на устройстве с поддержкой мыши, таком как рабочий стол, у которого нет касания возможность, затем запускаются события mouseenter/mouseleave и меню активируется без щелчка мыши. Если пользователь не находится на устройстве, которое запускает событие mouseenter / mouseleave, события click или tap запускаются, когда пользователь нажимает ссылку, а обработчик click или tap обрабатывает раскрывающийся переключатель.

отредактировано для точности.

13

другие 2 решения работают, но не сохраняют стиль начальной загрузки. Более простое решение-просто добавить класс "open".

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});
8

для этого можно использовать события javascript.

используя библиотеку mobile check, вы можете сказать

var domObject = document.querySelector('.myClassOrIDWhateverFloatsYourBoat');
if(mobile checked is true){
    domObject.addEventListener('hover', function(){
        $('.dropdown-toggle').dropdown();  // http://getbootstrap.com/javascript/
    })
}else{
   domObject.addEventListener('click', function(){
        $('.dropdown-toggle').dropdown();  // http://getbootstrap.com/javascript/
    })
}
1

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

  • показывает выпадающий список при наведении на родной класс Bootstrap (так что он хорошо сотрудничает с кнопкой мыши)
  • делает кнопку Ссылка работать, когда href установлен
  • сохраняет оригинальное поведение на мобильных устройствах

простая версия

$('ul.nav li.dropdown').hover(function() {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).toggleClass('open', true);
    }
}, function() {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).toggleClass('open', false);
    }
});
$('ul.nav li.dropdown a').click(function(){
    if (!$('.navbar-toggle').is(':visible') && $(this).attr('href') != '#') {
        $(this).toggleClass('open', false);
        window.location = $(this).attr('href')
    }
});

$('.navbar-toggle').is(':visible') проверяет, находимся ли мы в настоящее время в mobile вид, $(this).toggleClass('open', true) добавляет или удаляет open класс css, используемый bootstrap, и window.location = $(this).attr('href') отправляет пользователей в место в href ссылки.

чтобы добавить переходы jQuery, мы должны немного изменить скрипт.

модифицированная версия

visible = false;

function toggleDropdown(dropdown, delay, fade, state) {
    if (state === undefined) visible = !visible
    else visible = state

    dropdown.children('.dropdown-menu').stop(true, true).delay(delay)[visible ? 'fadeIn' : 'fadeOut'](fade, function() {
        dropdown.toggleClass('open', visible);
        dropdown.children('.dropdown-toggle').attr('aria-expanded', visible);
        $(this).css('display', '');
    });
}

$('ul.nav li.dropdown').hover(function() {
    if ($('.navbar-toggle').is(':visible')) return;
    toggleDropdown($(this), 50, 100, true)
}, function() {
    if ($('.navbar-toggle').is(':visible')) return;
    toggleDropdown($(this), 400, 200, false)
});

$('ul.nav li.dropdown a').click(function(){
    if ($('.navbar-toggle').is(':visible')) return;
    if ($(this).attr('href') != '#') {
        toggleDropdown($(this).parent(), 50, 100, false)
        window.location = $(this).attr('href')
    }
    else {
        toggleDropdown($(this).parent(), 50, 100)
    }
});

visible переменная делает все хорошо работать при повторном наведении во время работы анимации.

1

хороший способ достичь этого-включить наведение только тогда, когда меню не свернуто. 

$('.dropdown').on('mouseenter mouseleave click tap', function(event) {
  if (!$('.navbar-toggle').is(':visible')) {
    $(this).toggleClass("open");
  }
});
1
// toggle dropdown on mouse hover, click and tap events
$('.dropdown').on('mouseenter mouseleave click tap touchstart', function(event) {
    if (!$('.navbar-toggle').is(':visible')) {
        $(this).dropdown('toggle');
    }
});

вот немного измененная версия ответа @jme11 на основе Bootstrap 3 документация для выпадающих списков Javascript. преимущество использования этого метода заключается в том, что он позволяет раскрывающемуся списку функционировать точно так, как предполагалось, без необходимости изменять какие-либо классы и, следовательно, чище IMO.

Пример Codepen

1

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

$('.dropdown').on('mouseenter mouseleave click tap', function() {
  $(this).toggleClass("open");
});
0

для Bootstrap 4 работает следующий код.

$('.dropdown').on('mouseenter mouseleave click tap', function() {
    $(this).toggleClass("show");
});
0