javascript breaks - Dropdown do Bootstrap com Hover




index github (16)

Passe o mouse sobre os itens de navegação para ver se eles são ativados em foco. http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#

OK, então o que eu preciso é bastante simples.

Eu configurei uma barra de navegação com alguns menus suspensos (usando class="dropdown-toggle" data-toggle="dropdown" ), e funciona bem.

A coisa é que funciona " onClick ", enquanto eu preferiria se funcionasse " onHover ".

Existe alguma maneira interna para fazer isso?



A solução que estou propondo detecta se o dispositivo não é sensível ao toque e que o navbar-toggle da navbar-toggle (menu hambúrguer) não é visível e faz com que o item de menu pai revele o submenu no foco e siga seu link ao clicar .

Também faz tne margem-top 0 porque a lacuna entre a barra de navegação e o menu em algum navegador não permite que você passe para os subitens

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


A melhor maneira de fazer isso é apenas acionar o evento click de bootstraps com um hover. Desta forma, deve continuar a ser compatível com dispositivos de toque

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

Isso ajudará você a criar sua própria classe de foco para o 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;
}

As margens são definidas para evitar fechamento indesejado e são opcionais.

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>

Não se esqueça de remover o atributo button -toggle = "dropdown" se você quiser remover onclick open, e isso também funcionará quando a entrada for anexada com o menu suspenso.


Uma maneira fácil, usando jQuery, é esta:

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

Isto é o que eu uso para fazer dropdown em pairar com alguns 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');
    });
});

Tente isso usando a função hover com fadein fadeout animations

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

Atualizado com um plugin adequado

Eu publiquei um plug-in adequado para a funcionalidade de foco suspenso, na qual você pode definir o que acontece ao clicar no elemento dropdown-toggle :

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

Por que eu fiz isso, quando já existem muitas soluções?

Eu tive problemas com todas as soluções existentes anteriormente. Os CSS simples não estão usando a classe .open no .dropdown , portanto, não haverá feedback sobre o elemento de alternância suspenso quando a lista suspensa estiver visível.

Os js estão interferindo em clicar em .dropdown-toggle , então o menu suspenso é .dropdown-toggle em foco, depois o oculta ao clicar em um menu suspenso aberto, e mover o mouse acionará o menu suspenso para que seja exibido novamente. Algumas das soluções js estão freando a compatibilidade do iOS, alguns plugins não estão funcionando em navegadores de desktop modernos que estão suportando os eventos de toque.

É por isso que eu fiz o plugin github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover do github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover que evita todos esses problemas usando apenas a API JavaScript padrão do Bootstrap, sem qualquer invasão.


Para CSS, fica maluco quando você também clica nele. Este é o código que estou usando, mas também não altera nada para a visualização móvel.

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

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

Disparar um evento de click com um hover tem um pequeno erro. Se o mouse-in seguida, um click cria um efeito vice-versa. opens quando o mouse-out e close quando o mouse-in . Uma solução melhor:

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

Eu tento outras soluções, eu estou usando o bootstrap 3, mas o menu dropdown fecha rápido demais para passar por cima dele

suposto que você adicione class = "dropdown" para li, eu adicionei um tempo limite

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

Isso paira apenas a barra de navegação quando você não está em um dispositivo móvel, pois acho que a navegação não funciona bem em divisões móveis:

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

});

Menu suspenso de Bootstrap Trabalhe com o hover e permaneça próximo ao clicar, adicionando a exibição da propriedade : block; em css e removendo esses atributos data-toggle = "dropdown" role = "button" da tag de botão

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


Em vez de usar o new Date() você deve usar:

var timestamp = Date.parse('foo');

if (isNaN(timestamp) == false) {
  var d = new Date(timestamp);
}

Date.parse() retorna um timestamp, um inteiro representando o número de milissegundos desde 01 / Jan / 1970. Ele retornará NaN se não puder analisar a string de data fornecida.







javascript jquery html css twitter-bootstrap