When using the Bootstrap navigation bar component, if your navigation bar has a drop-down menu, then this navigation with a drop-down menu will only float the drop-down menu when clicked. Its own href attribute will be invalid, which means it loses the hyperlink function. This is not what I want. I hope that the link of the navigation bar can open its link normally, but it also needs the drop-down menu function, and start to tossing~
First, solve the problem of clicking on the navigation bar with a dropdown menu. The dropdown menu effect is implemented by JS. Analysis of the bootstrap.js file shows that Bootstrap wrote the dropdown menu as a JQuery plug-in and found a few key sentences in the dropdown code segment:
// APPLY TO STANDARD DROPDOWN ELEMENTS// =====================================================$(document).on('click.bs.dropdown.data-api', clearMenus).on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }).on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle).on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]', Dropdown.prototype.keydown)After finding a few key codes, I thought of a solution. Just close the click.bs.dropdown.data-api event and it will be OK. The code is as follows:
$(document).ready(function(){$(document).off('click.bs.dropdown.data-api');});The above code test is effective. The navigation bar can be clicked to solve the problem. The following is to solve the problem of mouse hovering and pull-down menu. This is relatively simple. It can be implemented with JQuery's mouse event. The code is as follows:
$(document).ready(function(){dropdownOpen();//Call});/*** Expand the submenu when the mouse passes through, so as not to need to click to expand*/function dropdownOpen() {var $dropdownLi = $('li.dropdown');$dropdownLi.mouseover(function() {$(this).addClass('open');}).mouseout(function() {$(this).removeClass('open');});}The above is the implementation code for the Bootstrap navigation bar that can be clicked and hovered to display the drop-down menu. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!