Utilizing nested Bootstrap 3.1.1 collapse functionality

Hey there! I need some assistance. Currently, I am working with Bootstrap 3.1.1 and implementing nested collapse menus in a sidenav. My goal is to apply a background color (using a specific class) to the open menu and remove it when the menu is closed.

Everything is functioning correctly, but I'm facing an issue with nested menus. The code I'm using removes the background color for the parent item when closing the child menu. I'm struggling to figure out how to only remove the background color if it's a top-level menu closure. In other words, the background color should not be removed when closing a child menu.

$(".nav-sidenav > li").on("show.bs.collapse", function () {
    $(this).addClass("sidenav-active-background");
});
$(".nav-sidenav > li").on("hide.bs.collapse", function () {
    $(this).removeClass("sidenav-active-background");
});

For reference, you can check out JSFiddle

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To ensure that the hide function covers all list items in the navigation menu, you must first remove the '>' in the hide method. Additionally, remember to include 'e' as an argument in the callback function and add e.stopPropagation() to prevent the parent element from triggering the event and removing the class.

Change from 

 $(".nav-sidenav > li").on("hide.bs.collapse", function () {
  $(this).removeClass("sidenav-active-background");
 });

To

$(".nav-sidenav li").on("hide.bs.collapse", function (e) {
  e.stopPropagation();
  $(this).removeClass("sidenav-active-background");
});

http://jsfiddle.net/clurect/TF2Tg/1/

Some suggestions: Consider using hidden.bs.collapse for better visual presentation. You can also implement checks to determine which list item triggered the event.

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

Get dynamic dropdown values that have been saved using Ajax

Within my form, I have a dynamic drop-down menu containing both "Category" and "Subcategory" options. The dropdown is functioning correctly and I have successfully stored the values in the "registrations" table. However, when I try to retrieve these values ...

jqueryajaxlaravel

Tips for dynamically updating an HTML value with Javascript

Summary of My Issue: This involves PHP, JS, Smarty, and HTML <form name="todaydeal" method="post"> <span id="fix_addonval"></span> <input type="radio" name="offer" id="offer_{$smarty.section.mem.index+1}" value="{$display_offe ...

phpjavascripthtml

Can anyone share a straightforward yet practical demonstration of using jquery.JsPlumb?

In my quest for a reliable graph-visualization JavaScript library, I recently came across jsPlumb at http://jsplumb.org. The examples I've seen truly showcase its advanced capabilities and attractive design. However, despite the extensive documentatio ...

javascriptjqueryjquery-uijsplumb

Skillful management of JQuery Ajax JSON errors

I have developed an Ajax save function for storing employee data, which returns a JSON object containing the details of the save operation. These details are then displayed on the browser. However, there are times when my server-side code may generate PHP ...

jqueryajaxjson

What is the best way to apply fading effects to three divs containing additional divs?

Looking at this HTML and CSS code: HTML <DIV class="newsPic"></DIV> <DIV class="newsPicTwo"></DIV> <DIV class="newsPicThree"></DIV> CSS .newsPic { width: 500px; height: 200px; } .newsPicTwo { width: 500px; height: 2 ...

javascriptjqueryhtmlcssanimation

Trouble with meta og:image on my SSL-secured WordPress site

Having some trouble adding meta properties to my WordPress website that is SSL certified. When I share the link on Skype and WhatsApp, the og:image is not working. I've tried multiple plugins and even directly added HTML code to my WordPress theme hea ...

phphtmlcsswordpressmeta-tags

Utilize VBA in Excel to interact with a jQuery button on a web page

Can anyone provide assistance with my VBA Excel code issue? Set ieDoc = Nothing Set ieDoc = ieApp.Document For Each Anchor In ieDoc.getElementsByTagName("div") If InStr(Anchor.outerHTML, "CategoryIDName-popup") > 0 Then ...

jqueryexcelhtmlvba

Using `left: initial` does not function properly in Internet Explorer

Unfortunately, the tooltip does not display correctly in IE as desired. This is how it should look (in Chrome): https://i.sstatic.net/dCM9z.png However, this is how it appears incorrectly in IE: https://i.sstatic.net/Tq6rY.png Here is my CSS code for ...

htmlcssinternet-explorer

The color of the button does not change when the jQuery onclick event is triggered

I am facing an issue with my buttons, specifically with Button 2. When Button 2 is clicked, I want the background color to change using an onclick event. However, despite my efforts, I have been unable to achieve this. Whenever I click Button 2, the colo ...

javascriptjqueryhtmlcss

Ways to arrange and space out td values

Here is an example of my HTML table: <table> <tr> <td>123 - 20 - 20</td> </tr> </table> The numerical values in the table are retrieved from a database and displayed like in this image: https://i.sstatic.net/ ...

htmlcssdatabasealignment

Different ways to position two header tags on top of each other instead of next to each other

I am attempting to adjust the placement of my header tags so that the second header sits directly below the first one, rather than side by side. Currently, I am using h1 and h2 tags for my headers. I have experimented with placing both headers inside an h ...

htmlcssheadertags

Tricky problem with z-index - how to position a CSS3 triangle under the menu

Hey there, thank you for taking the time to look into my issue. I'm currently working on a menu design that I would like to resemble this example: The key feature here is creating triangular shapes on either side and positioning them beneath the men ...

htmlcssz-index

Adjust the language code in a URL using JavaScript or Node.js

Within my common header file, there is a navbar that includes a multilanguage dropdown menu. The issue I am facing is that when I select a language from the dropdown, the page translates correctly. However, when I navigate to other pages, the selected lang ...

javascriptjqueryhtmlnode.jsexpress

I am encountering issues with getting jquery.multiple.select.js to properly validate and send the checked boxes to PHP

I'm having trouble with the validation and output in my PHP mailer using jquery.multiple.select.js v1.1.0. My goal is to allow visitors to select multiple options to request a quote on my site. Currently, I am able to receive the email with all other ...

javascriptphpjquery

The Javascript function must be executed with each page reload

Currently, I am analyzing an asp.net 2 web application that is in my care (even though I did not create it). There seems to be an issue with certain functionalities not working consistently when the page loads, particularly if using Firefox 3 within a vir ...

javascriptjqueryajaxasp.net-ajax

Organizing a very lengthy jQuery code line

As I was browsing through some questions here, I couldn't find what I was looking for. Is there a specific syntax that can help break up a long line of code into multiple lines? I want to avoid having one extremely lengthy piece of code. When using j ...

jquerysyntaxappendtidy

The Jquery navigation and image display features are experiencing technical difficulties in Internet Explorer

My website is currently in the development stage and functions well on all browsers except for IE10. Interestingly, both the menu bar and photo gallery, which rely on Jquery, are not functioning properly in IE10. Below is the code snippet: <script ty ...

javascriptjqueryhtmlcssinternet-explorer

When you reach a scrolling distance of over 300 vertical heights,

Is it possible to show and hide a class based on viewport height? I am familiar with displaying and hiding a class after a specified pixel height, but I'm wondering if it's achievable using viewport height instead? Specifically 3 times the viewp ...

javascripthtmlcss

What could be causing my website to have a horizontal scroll even when the width is set to 100%?

My website seems to be scrolling horizontally, possibly due to an issue with the footer. I suspect it might be related to the social media icons in the footer, but I'm not entirely sure. Any guidance on resolving this problem would be greatly apprecia ...

htmlcss

Leveraging AngularJS for parent-child communication through bindings in a unique and effective manner

I've come across the following code snippet: <div class="parent"> <div class="child"> and I have two directives, one for parent and one for child. When an event (such as a click) occurs on parent, I want something to happen on child ...

javascriptjqueryangularjs