For my current website project, I require a dropdown menu within another dropdown menu. However, it seems that the functionality for this feature has been removed in Bootstrap 5.0. Despite trying various methods to create sub-menus, none have been successful so far. Any guidance or solutions would be greatly appreciated!
This is a neat and efficient way to incorporate this solution!
(function($bs) {
const CLASS_NAME = 'has-child-dropdown-show';
$bs.Dropdown.prototype.toggle = function(_orginal) {
return function() {
document.querySelectorAll('.' + CLASS_NAME).forEach(function(e) {
e.classList.remove(CLASS_NAME);
});
let dd = this._element.closest('.dropdown').parentNode.closest('.dropdown');
for (; dd && dd !== document; dd = dd.parentNode.closest('.dropdown')) {
dd.classList.add(CLASS_NAME);
}
return _orginal.call(this);
}
}($bs.Dropdown.prototype.toggle);
document.querySelectorAll('.dropdown').forEach(function(dd) {
dd.addEventListener('hide.bs.dropdown', function(e) {
if (this.classList.contains(CLASS_NAME)) {
this.classList.remove(CLASS_NAME);
e.preventDefault();
}
if(e.clickEvent && e.clickEvent.composedPath().some(el=>el.classList && el.classList.contains('dropdown-toggle'))){
e.preventDefault();
}
e.stopPropagation(); // do not need pop in multi level mode
});
});
// for hover
function getDropdown(element) {
return $bs.Dropdown.getInstance(element) || new $bs.Dropdown(element);
}
document.querySelectorAll('.dropdown-hover, .dropdown-hover-all .dropdown').forEach(function(dd) {
dd.addEventListener('mouseenter', function(e) {
let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
if (!toggle.classList.contains('show')) {
getDropdown(toggle).toggle();
}
});
dd.addEventListener('mouseleave', function(e) {
let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
if (toggle.classList.contains('show')) {
getDropdown(toggle).toggle();
}
});
});
})(bootstrap);<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<!-- Begin SEO tag -->
<title>Infinite Multiple Level Dropdown Menu base on Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="076568687374737566774732293729372a6562736634">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<style>.dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu.dropend { margin-left:-1px !important }</style>
</head>
<body class="">
...
Remember, the hover feature may not be compatible with mobile devices. Choose the most suitable option for your requirements!
contains the files you need. For reference, here is the link to the code on I have attempted to remove all unnecessary elements from the actual project, but it has not made a difference. document.getElementById("image").style.backgroundImage = "url(" + d ...
I am encountering a problem with the images in the slideshow getting listed. I want to display only the first image in the list when the code is run, and have the rest of the images appear manually through clicking. Any assistance regarding this issue wou ...
Currently, I am working on a map with zoom in and zoom out functionalities. My main concern is how to make the red section invisible while keeping the buttons visible. This will ensure that when users search for locations on the map, their view will not be ...
Check out our website imageI'm facing a challenge in making these two text elements appear next to each other rather than stacking on top of each other. Additionally, I need them to adapt responsively to changes in screen size. When 'Icontext&ap ...
I am trying to utilize ng-repeat within Angular to iterate through multiple <li> elements with a directive embedded. My goal is to have the first two items in the ng-repeat display differently in terms of styling and content compared to the remaining ...
While experimenting with the fixed position property to maintain a constantly positioned nav bar on mobile, I encountered some challenges during the trial and error process. However, by utilizing margin top and translation functions, I was able to successf ...
I have a component that includes an input slider controlled by radio buttons. <input checked={settings[0]?.payments.length === 1 ? 'checked' : null} type='radio' id={payment.value} value={payment.value} onChange={ settings[0] ...
My desire to delve into the world of jQuery has ignited. From my perspective, jQuery simply selects the desired element and performs actions on it. However, I find the selection process closely resembling CSS selectors, a realm with which I am not well-ver ...
When using the mouseover function in Google Chrome, the border bottom is not disappearing as expected. However, this works fine in Firefox and IE. Interestingly, removing border-collapse: collapse fixes the issue. What could be causing this? Is there a sol ...
Hello fellow developers. I am interested in creating a text parser using jQuery. My goal is to develop a function that can take a string as input and convert it accordingly. Imagine we have a div with the following HTML structure: <div class="item"> ...
Session unset function for the error message is not functioning correctly. Upon clicking the Login button with empty fields, the session works as expected. However, if I refresh or reload the page, an error message Undefined index: message in... appears sp ...
One of the recent additions in Bootstrap is the scroll feature with the modal-dialog-scrollable class. This class was designed to make only the content within the modal-body scrollable. However, there seems to be an issue with using scrollTop: 0 in conjunc ...
I have an upcoming exam and I'm reviewing the previous exam paper that was given to me. The question is: When multiple style sheet rules are applied to the same element, which type of rule takes precedence? a. Any declaration from the browser b. ...
New proposed layout I need assistance with centering all flexbox items in a 3-column layout. Additionally, I want the items in rows that are not full to be centered and aligned to the left. Any suggestions for achieving this? Below is my current code, bu ...
How can I enable scrolling over aframe on mobile devices? I attempted to disable the scene controls but scrolling still doesn't work; the scene keeps interacting instead. ...
I am looking to customize my HTML files by using custom tags to incorporate knockout components [1]: <like-widget params="value: userRating"></like-widget> To enable the tag in VisualStudio's HTML formatting settings, I made the followin ...
Can someone confirm if it is true that when using https, URLs should begin with //[your-domain]/? A friend using WordPress mentioned this but I haven't been able to find specific information on the topic. ...
Can files be downloaded from a server and saved in the same location on disk as the downloading HTML file? This functionality is required for an app that serves as a database of HTML files, with periodic updates. The goal is to prompt users for updates an ...
Can a maximum number of columns be set for a column-direction flexbox? I want to prevent the creation of a third column when the second one is filled. Instead, I prefer that the overflow extends both first columns while maintaining the element order. http ...
I am aiming to create a layout similar to this. My goal is to have a fixed sidebar on the left that measures 330px wide. Additionally, I want a gray box positioned at the center of the screen that adjusts its position based on changes in the content above ...