Comments (3)
CWSpear
commented on September 28, 2024
What is "the sample MD code?"
Chrome 67 is still in Beta. Does it work in Chrome 66?
Do you have a touch-enabled Windows computer?
from bootstrap-hover-dropdown.
leomontenegro6
commented on September 28, 2024
I'm having a similar problem: I've used this plugin in some apps developed in Boostrap 3, and it worked just fine. However, I'm trying to use it with Bootstrap 4, and it isn't working.
My guess is that, for now, this plugin will work only on BS 3.
from bootstrap-hover-dropdown.
leomontenegro6
commented on September 28, 2024
After fiddling with this plugin source code, I noticed there's some elements and classes that are specific to BS3, and since those elements / classes have changed in BS4, that indeed resulted in bootstrap-hover-dropdown not working in BS4.
However, I was able to make it work in BS4. I had to change a few class names and add a few conditions to get submenus working just as before.
Here's a diff patch, detailing the changes I've made. The patch was created by comparing the original bootstrap-hover-dropdown.js file with the one containing the changes made by me. I done it based on the commit 56c494f, since it's the latest commit containing specific changes on that file in particular.
26c26
< $allDropdowns = $allDropdowns.add(this.parent());
---
> $allDropdowns = $allDropdowns.add(this.parent().not('.dropdown-submenu'));
50c50
< if(!$parent.hasClass('open') && !$this.is(event.target)) {
---
> if(!$parent.hasClass('show') && !$this.is(event.target)) {
61,63c61,68
< $this.attr('aria-expanded', 'false');
< $parent.removeClass('open');
< $this.trigger(hideEvent);
---
> if($parent.hasClass('dropdown')){
> $this.attr('aria-expanded', 'false');
> $parent.removeClass('show');
> $this.trigger(hideEvent);
> $this.next().removeClass('show');
> } else {
> $this.removeClass('active');
> }
71c76
< if(!$parent.hasClass('open') && !$parent.is(event.target)) {
---
> if(!$parent.hasClass('show') && !$parent.is(event.target)) {
108c113
<
---
>
113,115c118,143
< if(settings.instantlyCloseOthers === true)
< $allDropdowns.removeClass('open');
<
---
> if(settings.instantlyCloseOthers === true){
> var $aLinkParent;
> if($parent.children('a').hasClass('dropdown-item')){
> $aLinkParent = $parent.closest('li.nav-item').children('a')
> } else {
> $aLinkParent = $parent.children('a');
> }
>
> $allDropdowns.each(function(){
> var $dropdown = $(this);
>
> var $aLink = $dropdown.children('a');
>
> if($dropdown.hasClass('dropdown')){
> $dropdown.removeClass('show');
> if($aLink[0] == $aLinkParent[0]){
> $aLinkParent.parent().addClass('show');
> } else {
> $aLink.next().removeClass('show');
> }
> } else {
> $aLink.removeClass('active');
> }
> })
> }
>
118,120c146,152
< $this.attr('aria-expanded', 'true');
< $parent.addClass('open');
< $this.trigger(showEvent);
---
> if($parent.hasClass('dropdown')){
> $this.attr('aria-expanded', 'true');
> $parent.addClass('show');
> $this.next().addClass('show');
> } else {
> $this.addClass('active');
> }I've tested it together with bootstrap-submenu plugin, in order to have multiple nested navbars and javascript show on hover simultaneously. They worked together just fine in BS4, just like it was on BS3.
Last but not least, it's worth to mention that once you apply the changes above, it won't work on BS3 anymore, but only on BS4. It still isn't a global solution for multiple BS versions.
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
- Deactivate hover when in "mobile mode" HOT 4
- 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
- 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.