Whenever I click on a submenu item, my sidebar menu automatically closes. I would like to find a way to

When I click on a subitem, the sidebar closes. How can I keep it open when clicking on subitems like "Manage Competition"?

<!-- Sidebar Menu -->
            <ul class="sidebar-menu">
                <li class="header">SECTION NAVIGATIONS</li>
              <li class="treeview">
                    <a href="#"><i class="fa fa-film"></i><span>Events </span> <i class="fa fa-angle-left pull-right"></i></a>
                    <ul class="treeview-menu"> 
                      
                   
               <li ><a  href="competitions.php" ><i class="fa fa-plus"></i>Manage Competitions</a></li>
                
              </ul>
                    </li>
                    
                      <li class="treeview">
                    <a href="#"><i class="fa fa-film"></i><span>Data </span> <i class="fa fa-angle-left pull-right"></i></a>
                    <ul class="treeview-menu"> 
                        <li><a  href="users.php"><i class="fa fa-plus"></i>Manage Users</a></li>
                        <li><a  href="cart.php"><i class="fa fa-plus"></i>Manage Cart</a></li>
                        <li><a  href="clients.php"><i class="fa fa-plus"></i>Manage Clients</a></li>
                        
                    </ul>
              
  </li>
                 <li class="treeview">
                    <a href="#"><i class="fa fa-film"></i><span>Settings </span> <i class="fa fa-angle-left pull-right"></i></a>
                    <ul class="treeview-menu"> 
                        <li><a  href="prices.php"><i class="fa fa-plus"></i>Manage Prices</a></li>
                        
                    </ul>
                </li>
                  
            </ul><!-- /.sidebar-menu -->
javascriptjquerycssbootstrap-4

Answer №1

It seems like handling the closing functionality with JavaScript is necessary in this case

document.addEventListener('DOMContentLoaded', function () {
var treeviewMenus = document.querySelectorAll('.treeview');
treeviewMenus.forEach(function (menu) {
    menu.addEventListener('click', function (event) {
        // Determine if the clicked element is a subitem
        if (event.target.closest('.treeview-menu')) {
            // Prevent automatic closing
            event.stopPropagation();
        } else {
            // Toggle the open state of the menu
            this.classList.toggle('menu-open');
        }
    });
});

}); This approach should work, but you may need to customize it for your specific project requirements :) If you are utilizing bootstrap core functionalities, make sure to adjust accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I transfer a MongoDB collection to an EJS file in the form of a sorted list?

I have successfully displayed the collection as a json object in its own route, but now I want to show the collection in a list under my index.ejs file (I'm still new to ejs and MongoDB). Below is the code that allows me to view the json object at lo ...

javascriptnode.jsjsonmongodbejs

Mastering the alignment of Material-UI Menu items

When using the menu and menu item components of material-ui to create a select dropdown menu, I encountered an unusual issue where the dropdown menu always expands to the left side of the box, as shown in the image below: https://i.stack.imgur.com/ykRrp.jp ...

javascriptcssreactjsmaterial-ui

Generating SVG images that show up as black in light mode and switch to light colors in dark mode

I am currently working on a website that has the option to switch between light and dark mode, and I need my logo to adjust accordingly. The black elements of my logo should appear black in dark mode and light in light mode. I attempted using the CSS cod ...

htmlcsssvg

What is the best method for implementing Datepicker translations in Angular?

I am looking to incorporate the DatePicker component in Angular, enabling users to select a date that can be translated based on their browser's settings. Any suggestions on how to achieve this? <mat-form-field appearance="fill"> ...

javascriptangulartypescript

Windows authentication login only appears in Chrome after opening the developer tools

My current issue involves a React app that needs to authenticate against a windows auth server. To achieve this, I'm hitting an endpoint to fetch user details with the credentials included in the header. As per my understanding, this should trigger th ...

javascriptreactjstypescripthttpwindows-authentication

Issue with Hover Behavior in Bootstrap 5 Navbar Dropdown

While developing a website using Bootstrap 5, I encountered an issue with the navbar dropdown not opening on hover despite attempting to add custom CSS. Strangely, the CSS code worked perfectly in isolation when I tested it in a code snippet, but failed to ...

htmlcssvisual-studiofrontendbootstrap-5

Best Practices and Tips for Layout Design Using HTML and CSS Grid

As I begin my journey into front-end development, I am currently immersing myself in studying html, css, and vanilla javascript. While things are going well so far, I find myself struggling with understanding the organization of design layouts in general. ...

htmlcssfrontend

Issues with compiling Vuetify SASS in Nuxt for incorrect output

I am trying to integrate Vuetify with Nuxt using a Plugin but I am encountering the following issue: https://i.sstatic.net/KZbCN.png Error Message: ERROR in ./node_modules/vuetify/src/components/VProgressLinear/VProgressLinear.sass ...

javascriptvue.jssassvuetify.jsnuxt.js

How to Center a Bootstrap List on Tablets and Mobile Devices

I've run into a bit of a snag and despite my efforts to research online, I'm unable to find a solution. Currently, I am utilizing bootstrap to develop my website. However, when I resize the page to a mobile or tablet size, my navbar list shifts ...

htmlcssbootstrap-4

Is it possible to adjust the height of ion.RangeSlider?

Currently, I am using the ion.RangeSlider in my project, which can be accessed here: Although it functions well, I am interested to know if there is a way to increase the size/height of the slider. I have attempted adjusting the height and padding but hav ...

jqueryhtmlcsssliderrange

I am looking to configure a specific MUI dropdown to appear below a particular field

In my scenario, when I click on the select dropdown and a popup appears above the field, I would like it to open below that specific area. The desired behavior can be observed in the code sandbox link provided. I need to configure it to start from below th ...

javascriptreactjsmaterial-ui

Vue 3's click event handler does not recognize $options.x as a valid function

I'm encountering a perplexing issue. I am currently in the process of creating a Wordpress plugin using Vue, but unfortunately, I am unable to establish functionality for the @click event. <script> export default { name: "App", me ...

javascriptwordpressvue.jsvuejs3

remove CSS attribute from the JavaScript DOM properties

Can someone help me figure out what's wrong with my code? I need to remove all "link" tags with the attribute "rel = "stylesheet" Here is the HTML code I am working with: <html> <head> <title>teset</title> <meta charset="u ...

javascripthtmlcss

Having some trouble with my React and MUI project - the button animation isn't functioning as expected when clicked

After implementing a Button from MUIv5, I noticed that the full animation only triggers when I hold down the button instead of with a simple click. Is there a way to fix this so that the animation fully plays with just a single click? Any help is apprecia ...

cssreactjsmaterial-uicss-transitionsjss

AngularJS - let's make pagination more interactive by adding an active class to the current page

Check out this fiddle I created: http://jsfiddle.net/tbuchanan/eqtxLkbg/4/ Everything is working as intended, but I'm looking to add an active class to the current page when navigating through the pages: <ul class="pagination-controle pagination" ...

javascriptjqueryangularjs

JavaScript code to retrieve and store data from API endpoints

I am working with a Web API endpoint that provides the location of a URL (). When a button is clicked, this API is called and a URL is returned. The file format could be PDF, Excel, or Word. I am looking for a way to download the file and save it to disk ...

javascriptangularjsasp.net-web-api2

What could be the reason for CSS3 PIE failing to work on sub pages when an absolute path is used in the CSS file?

I am struggling with CSS styling and have created the following class: a.greenbutton, input.greenbutton { /*background: url("../image/button.png") repeat-x scroll left top transparent;*/ behavior: url("/css3pie/PIE.php"); -webkit-border-radiu ...

htmlcsscss3pie

How is the same-domain policy applied to popup windows that have JavaScript enabled in the URL?

Is it possible to achieve something similar to this? var w = window.open("javascript: makeAnAjaxRequest();"); I'm curious whether the Ajax request, which is triggered after the new window is opened, would be considered a cross-site request. Does the ...

javascriptajaxcross-domain

Exploring the process of cycling through "Fetch" JSON data in React.js for a dynamic slider component after setting it to state

Still getting the hang of React, so please go easy on me! My main objective is to retrieve data from my personal JSON server and display it on a custom "Slider" component that I'm working on. Following a tutorial, I wanted to challenge myself by usi ...

javascriptreactjsjson

Error message encountered: Missing property status in TypeScript code

An error occurs in the refetchInterval when accessing data.status, with a message saying "property status does not exist" chatwrapper.tsx const ChatWrapper = ({ fileId }: ChatWrapperProps) => { const { data, isLoading } = trpc.getFileUploadStatus.use ...

javascriptreactjsnode.jstypescriptnext.js