Html 如何在引导v4中实现导航栏下拉悬停？_Html_Css_Twitter Bootstrap

Html 如何在引导v4中实现导航栏下拉悬停？

html css twitter-bootstrap

Html 如何在引导v4中实现导航栏下拉悬停？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我对新的引导版本有点困惑，因为他们将下拉菜单更改为div： <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNa

我对新的引导版本有点困惑，因为他们将下拉菜单更改为div：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>
      </li>
    </ul>
  </div>
</nav>

你们有没有想过在那个片段的下拉链接中获得一个悬停下拉列表，而不添加额外的脚本代码（仅css和来自引导的脚本）？我已经看到了bootstrap css类，我无法与bootstrap V3中的类联系起来（我在V3中没有添加jquery就完成了这项工作）

简单，仅CSS解决方案：

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

单击时，它仍然会将类

show

切换到它（不再悬停时将保持打开状态）

要正确地解决此问题，请使用保留给基于指针的设备的事件和属性：jQuery的

mouseenter

、

mouseleave

和

：hover

。应能顺利、直观地工作，同时不会干扰下拉菜单在基于触摸的设备上的工作方式。尝试一下，让我知道它是否适合您：

完成jQuery解决方案（触摸未触及）：

v4.1.2之前的解决方案（已弃用）：

$（'body'）.on（'mouseenter mouseleave'，'.dropdown'，函数（e）{
var _d=$（e.target）.最近（'.dropdown'）；
if（e.type==='mouseenter'）_d.addClass（'show'）；
setTimeout（函数（）{
_d、 toggleClass（'show'，'u d.is（'：hover'）；
$（“[data toggle=“dropdown”]”，_d.attr（'aria-expanded'，_d.is（'：hover'））；
},300);
});

$（'body'）.on（'mouseenter mouseleave'，'.dropdown'，函数（e）{
var _d=$（e.target）.最近（'.dropdown'）；
if（e.type==='mouseenter'）_d.addClass（'show'）；
setTimeout（函数（）{
_d、 toggleClass（'show'，'u d.is（'：hover'）；
$（“[data toggle=“dropdown”]”，_d.attr（'aria-expanded'，_d.is（'：hover'））；
},300);
});
/*这是不需要的，只是防止在点击dd链接时重新加载页面*/
$（'.dropdown a'）。在（'单击tap'，e=>e.preventDefault（））

只要在样式表中添加这个简单的css代码，就可以开始了

.dropdown:hover > .dropdown-menu {
    display: block;
}
.dropdown > .dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

自v4发布以来，Bootstrap的功能似乎略有变化。

.dropdown菜单

项现在除了

.dropdown

之外还显示了

.show

类。我修改了Andrei的答案，在

下拉菜单上切换类。请注意，CSS不再是必需的，HTML是相同的，只是我更新了到当前版本的链接，并且nav类更改为navbar expand md


$（'body'）.on（'mouseenter mouseleave'，'.dropdown'，函数（e）{
var dropdown=$（e.target）.最近（'.dropdown'）；
变量菜单=$（'.dropdown menu'，dropdown）；
addClass（'show'）；
menu.addClass（'show'）；
setTimeout（函数（）{
dropdown[dropdown.is（'：hover'）？'addClass'：'removeClass']（'show'）；
菜单[dropdown.is（'：hover'）？'addClass'：'removeClass']（'show'）；
}, 300);
});











当我被要求将导航栏改为悬停交互时，我已经使用了导航栏并对其进行了样式化，所以最终使用jQuery解决了这个问题
function bootstrapHoverMenu (bp = 768) {

  // close all dropdowns that are open
    $('body').click( function (e) {
    $('.dropdown-menu.show').removeClass('show');
  });

  // show dropdown for the link clicked
  $('.nav-item').hover(function (e) {
    $('.dropdown-menu.show').removeClass('show');
    if(( $(window).width() >= bp )) {
      $dd = $(this).find('.dropdown-menu');
      $dd.addClass('show');
    }
  });

  // get href for top level link if clicked and open
  $('.dropdown').click(function (e) {
    if( $(window).width() < bp ) {
      $('.dropdown-menu').css({'display': 'none'});
    }
    $href = $(this).find('.nav-link').attr('href');
    window.open($href, '_self');
  });
}

$(document).ready( function() {
   // when page ready run the fix
   bootstrapHoverMenu();
});

函数bootstrapHoverMenu（bp=768）{
//关闭所有打开的下拉列表
$（'body'）。单击（函数（e）{
$（'.dropdown menu.show'）.removeClass（'show'）；
});
//显示所单击链接的下拉列表
$（'.nav item'）。悬停（函数（e）{
$（'.dropdown menu.show'）.removeClass（'show'）；
如果（$（窗口）.width（）>=bp））{
$dd=$（this.find（'.dropdown menu'）；
$dd.addClass（'show'）；
}
});
//如果单击并打开顶级链接，则获取href
$（'.dropdown'）。单击（函数（e）{
如果（$（窗口）.width（）

缺点是移动设备只有顶级链接。
Andrei的“完整”jQuery+CSS解决方案的意图是正确的，但它冗长且仍然不完整。不完整，因为虽然它可能涵盖了所有必要的DOM更改，但它缺少了触发。冗长，因为它是在引导程序已经提供的情况下重新发明的轮子，它完成了所有事情
因此，正确的、干燥的解决方案是jQuery，它不依赖于在其他答案中经常重复的CSS破解：
$('body').on('mouseover mouseout', '.dropdown', function(e) {
    $(e.target).dropdown('toggle');
});

我认为这只是简单地与Bootstrap4一起工作，我添加了内联，但您始终可以从脚本绑定事件
  <a 
onmouseover="$('#navbarDropdownMenuLink').dropdown('toggle')"
class="nav-link dropdown-toggle" 
href="http://example.com" 
id="navbarDropdownMenuLink" 
data-toggle="dropdown" 
aria-haspopup="true" 
aria-expanded="false">
      Dropdown link
    </a>

此解决方案可打开和关闭
<script>
$(document).ready(function() {
  // close all dropdowns that are open
  $('body').click(function(e) {
      $('.nav-item.show').removeClass('show');
      //$('.nav-item.clicked').removeClass('clicked');
      $('.dropdown-menu.show').removeClass('show');
  });

  $('.nav-item').click( function(e) {
    $(this).addClass('clicked')
  });

  // show dropdown for the link clicked
  $('.nav-item').hover(function(e) {
      if ($('.nav-item.show').length < 1) {
        $('.nav-item.clicked').removeClass('clicked');
      }
      if ($('.nav-item.clicked').length < 1) {
          $('.nav-item.show').removeClass('show');
          $('.dropdown-menu.show').removeClass('show');
          $dd = $(this).find('.dropdown-menu');
          $dd.parent().addClass('show');
          $dd.addClass('show');
      }
  });
});</script>

Bootstrap v4解决方案-基于jQuery，但优于纯css解决方案
这样可以确保您仍然可以跟踪顶级链接的单击，并且
与手机兼容
这是建立在桌面和移动的想法。可以用一个检查窗口宽度是否大于768px的条件来包装jQuery
jQuery
CSS
引导程序4 CSS-o
if(( $(window).width() >= 992 )) {

/** Dropdown on hover */
$(".nav-link.dropdown-toggle").hover( function () {
    // Open up the dropdown
    $(this).removeAttr('data-toggle'); // remove the data-toggle attribute so we can click and follow link
    $(this).parent().addClass('show'); // add the class show to the li parent
    $(this).next().addClass('show'); // add the class show to the dropdown div sibling
}, function () {
    // on mouseout check to see if hovering over the dropdown or the link still
    var isDropdownHovered = $(this).next().filter(":hover").length; // check the dropdown for hover - returns true of false
    var isThisHovered = $(this).filter(":hover").length;  // check the top level item for hover
    if(isDropdownHovered || isThisHovered) {
        // still hovering over the link or the dropdown
    } else {
        // no longer hovering over either - lets remove the 'show' classes
        $(this).attr('data-toggle', 'dropdown'); // put back the data-toggle attr
        $(this).parent().removeClass('show');
        $(this).next().removeClass('show');
    }
});
// Check the dropdown on hover
$(".dropdown-menu").hover( function () {
}, function() {
    var isDropdownHovered = $(this).prev().filter(":hover").length; // check the dropdown for hover - returns true of false
    var isThisHovered= $(this).filter(":hover").length;  // check the top level item for hover
    if(isDropdownHovered || isThisHovered) {
        // do nothing - hovering over the dropdown of the top level link
    } else {
        // get rid of the classes showing it
        $(this).parent().removeClass('show');
        $(this).removeClass('show');
    }
});

@media(min-width:  768px) {
  .dropdown-menu {
    margin-top: 0; // fixes closing on slow mouse transition
  }
}

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

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

   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      ..
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown">
              Dropdown
            </a>
            <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>   

$(window).one('mouseover', function(){
      window.USER_CAN_HOVER = true;
      if(USER_CAN_HOVER){
          jQuery('#navbarNavDropdown ul li.dropdown').on("mouseover", function() {
             var $parent = jQuery(this);
             var $dropdown = $parent.children('ul');

             $dropdown.show(200,function() { 
               $parent.mouseleave(function() {
                 var $this = jQuery(this);
                 $this.children('ul').fadeOut(200);
               });
             });
          });
      };

.dropdown:hover>.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0px, 0px, 0px);
}

$('.dropdown-hoverable').hover(function(){
    $(this).children('[data-toggle="dropdown"]').click();
}, function(){
    $(this).children('[data-toggle="dropdown"]').click();
});

<nav class="nav">
  <li class="nav-item dropdown dropdown-hoverable">
    <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">Menu link</a>
    <ul class="dropdown-menu">
    </ul>
  </li>
</nav>

@media (min-width: 992px) { 
.dropdown:hover>.dropdown-menu {
  display: block;
}
}

// Mouse over
$('body').on('mouseover', '.dropdown', function(e) { 
    $(this).children('.dropdown-toggle').dropdown('show');
});

// Mouse leave
$('body').on('mouseleave', '.dropdown', function(e) { 
    $(this).children('.dropdown-toggle').dropdown('hide');
});

.navbar .nav-item:not(:last-child) {
  margin-right: 35px;
}

.dropdown-toggle::after {
   transition: transform 0.15s linear;
}

.show.dropdown .dropdown-toggle::after {
  transform: translateY(3px);
}

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

const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";

$(window).on("load resize", function() {
  if (this.matchMedia("(min-width: 768px)").matches) {
    $dropdown.hover(
      function() {
        const $this = $(this);
        $this.addClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "true");
        $this.children($dropdownMenu).addClass(showClass);
      },
      function() {
        const $this = $(this);
        $this.removeClass(showClass);
        $this.find($dropdownToggle).attr("aria-expanded", "false");
        $this.children($dropdownMenu).removeClass(showClass);
      }
    );
  } else {
    $dropdown.off("mouseenter mouseleave");
  }
});

$('li.nav-item').mouseenter(function (e) {

        e.stopImmediatePropagation();

        if ($(this).hasClass('dropdown')) {

            // target element containing dropdowns, show it
            $(this).addClass('show');
            $(this).find('.dropdown-menu').addClass('show');

            // Close dropdown on mouseleave
            $('.dropdown-menu').mouseleave(function (e) {
                e.stopImmediatePropagation();
                $(this).removeClass('show');
            });

            // If you have a prenav above, this clears open dropdowns (since you probably will hover the nav-item going up and it will reopen its dropdown otherwise)
            $('#prenav').off().mouseenter(function (e) {
                e.stopImmediatePropagation();
                $('.dropdown-menu').removeClass('show');
            });

        } else {
            // unset open dropdowns if hover is on simple nav element
            $('.dropdown-menu').removeClass('show');
        }
    });

 // Toggles a B4 dropdown-menu to a given state.
 const toggleDropdownElement = ($dropdown, shouldOpen = false) => {
   const $dropdownToggle = $dropdown.children('[data-toggle="dropdown"], a');
   const $dropdownMenu = $dropdown.children('.dropdown-menu');

   // Change the dropdown menu. It's similar to B4 Dropdown.show()/.hide(), see /bootstrap/js/src/dropdown.js.
   if (shouldOpen) {
     $dropdown.trigger('show.bs.dropdown');
     $dropdownToggle.attr('aria-expanded', true).focus();
     $dropdownMenu.addClass('show');
     $dropdown.addClass('show').trigger($.Event('shown.bs.dropdown', $dropdownMenu[0]));
   } else {
     $dropdown.trigger('hide.bs.dropdown');
     $dropdownToggle.attr('aria-expanded', false);
     $dropdownMenu.removeClass('show');
     $dropdown.removeClass('show').trigger($.Event('hidden.bs.dropdown', $dropdownMenu[0]));
   }
 };

 // Toggles a B4 dropdown-menu with any nesting level.
 const toggleDropdown = (event) => {
   const $dropdown = $(event.target).closest('.dropdown');
   const $parentDropdownMenu = $dropdown.closest('.dropdown-menu');
   const shouldOpen = event.type !== 'click' && $dropdown.is(':hover');

   // If the dropdown was closed already, break the 'mouseleave' event cascade.
   if (!shouldOpen && !$dropdown.hasClass('show')) return;

   // Change the current dropdown menu (last nested).
   toggleDropdownElement($dropdown, shouldOpen);

   // We have to close the dropdown menu tree if it was a click or the menu was leave at all.
   if (event.type === 'click' || $parentDropdownMenu.length && !$parentDropdownMenu.is(':hover')) {
     $dropdown.parents('.dropdown').each((index, element) => {
       toggleDropdownElement($(element), false);
     });
   }
 };

 if (viewport && viewport.is('>=xl')) {
   $('body')
     .on('mouseenter mouseleave', '.dropdown', toggleDropdown)
     .on('click', '.dropdown-menu a', toggleDropdown);

   // Disable the default B4's click. Other words, change a dropdown-toggle to a normal nav link.
   $(document).off('click.bs.dropdown', '[data-toggle="dropdown"]');
   $(document).off('click.bs.dropdown.data-api', '[data-toggle="dropdown"]'); // Not sure about it.
 }

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

.dropdown-menu { margin-top: 0!important }