Comments (4)
I am using a workaround for this by executing the plugin via jQuery on screens larger than 480px only:
$(function() {
var pageWidth = $(window).width();
if( $(window).width()> 480){
$('.dropdown-toggle').dropdownHover();
}
});
So on everything smaller than this I am using Bootstrap's data-toggle="dropdown"
without the plugin. Just make sure data-toggle="dropdown"
isn't available for screens larger than 480px. There the plugin comes into play and not Bootstrap's data-toggle.
Maybe this workaround helps a little.
P. S.: That also means that one should put the parent menu item into the dropdown menu's children list as well to have a clickable link which otherwise wouldn't be available on those small screens. (Mobile only.) Hope to have everything explained somehow understandable :-)
from bootstrap-hover-dropdown.
@haurg does this work for you? Seems this issue can be closed...
from bootstrap-hover-dropdown.
Hi. ...and how you disable Bootstrap Hover Drop-down after its initialisation? When screen width is again less then 480px? For example when user rotates device?
from bootstrap-hover-dropdown.
Here is my solution for this.
jQuery(function($) {
var MOBILE_BREAKPOINT = 768
var $window = $(window)
var $dropdowns = $('[data-hover="dropdown"]')
var resizeId;
var initilized = true
// Debounce resize function.
$window
.on('resize.handleDropdowns', function() {
clearTimeout(resizeId);
resizeId = setTimeout(resizedEnded, 500);
})
.trigger('resize.handleDropdowns')
function resizedEnded() {
if ($window.width() <= MOBILE_BREAKPOINT) {
// Remove dropdown on hover if initialized.
if (initilized) {
$dropdowns
.each(function() {
var $link = $(this)
$link.off('mouseenter').off('mouseleave')
$link.parent().off('mouseenter').off('mouseleave')
})
.on('click.handleDropdowns', function(e) {
e.preventDefault()
var $link = $(this)
var $menuItem = $link.closest('.menu-item')
var $subMenu = $menuItem.find('.dropdown-menu')
if ($menuItem.hasClass('open')) {
$menuItem.removeClass('open')
$link.attr('aria-expanded', false)
} else {
$menuItem.addClass('open')
$link.attr('aria-expanded', true)
}
})
initilized = false
}
} else {
// Add dropdown on hover and remove dropdown on click.
if (!initilized) {
$dropdowns
.off('click.handleDropdowns')
.dropdownHover()
initilized = true
}
}
}
})
from bootstrap-hover-dropdown.
Related Issues (20)
- Versions do not update on CDNJS.com HOT 6
- Hover is not working in Chrome Version 47.0.2526.80 m HOT 6
- demo site down? HOT 2
- Doesn't work on Firefox 43.0.4 on Windows 10 Professional. HOT 2
- Problem when navbar is collapsed HOT 4
- Problem with hover on <a> ? HOT 3
- Mouseover inputbox's remembered value will close the nav
- invalid-meta bootstrap-hover-dropdown
- Can't toggle dropdown on touch devices unless using bootstrap's data-toggle="dropdown" HOT 1
- Hover works only sometimes HOT 5
- shown.bs.dropdown & hidden.bs.dropdown are not triggered HOT 2
- When the 'a' tag has child elements the hover doesnt always work because of the event.target HOT 12
- Can't seelct the top level nav item HOT 2
- Delay option for submenus
- Anchor element gets hidden HOT 1
- Padding and margin prevents openDropdown event
- Doesn't work on Firefox 57.0.2 (64-bit) HOT 2
- My hover silently fails... HOT 3
- Any chance to implement Bootstrap 5 support?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootstrap-hover-dropdown.