When you click on a sublevel in the vertical CSS and JavaScript onclick menu, it disappears automatically

Question

When you click on a sublevel in the vertical CSS and JavaScript onclick menu, it disappears automatically

I'm a beginner when it comes to Javascript, and I'm still getting the hang of CSS/HTML. Currently, I am working on creating a vertical menu using CSS and javascript. My goal is to have the sublevels appear on the right side of the menu when someone clicks on the appropriate title. I have successfully implemented the functionality for the first sublevel. It shows up and disappears when its 'parent' is clicked. However, whenever I attempt to click on a title within the sublevel, the sublevel closes instead of opening the next one. I know there must be an error in my approach, but I can't seem to figure out what it is :( I've compiled all of my code here: http://jsfiddle.net/kyqJ6/, but for some reason, it doesn't work there even though I copied it exactly as is. Here's an example of the javascript segment:

function dropdown1()
    {
        if(document.getElementById('menu1').style.display=='block'){
            document.getElementById('menu1').style.display='none';
        }
        else{ 
            document.getElementById('menu1').style.display='block';
        }
    };

I understand that there may be mistakes in my code and many areas where improvements could be made. Please don't hesitate to point those out. However, at this point, what I really need help with is resolving the issue mentioned above :) Thank you for taking the time to read this, and in advance, thank you for any help or advice you can provide!

javascript html css drop-down-menu menu

Answer 1

Answer №1

At first, the issue with your jsfiddle not working properly is due to how you have set up the script loading. Changing it to "No wrap - in <head>" instead of onLoad should resolve this.

Secondly, what you are experiencing is a result of something known as propagation. To understand this better, consider two objects, A and B:

--------------------
|A                 |
|     --------     |
|    |B       |    |
|    |        |    |
|     --------     |
|                  |
--------------------

Basically, all events in the DOM bubble up through the parent objects. So when clicking on A, clickA() will trigger. However, when clicking on B, both clickB() and then clickA() will be triggered because B is a child object of A. This jsFiddle example demonstrates this concept by logging events in the console. Therefore, even though your sub-level dropdowns do show up initially, clicking on their parent dropdown labels hides everything (expanding the sub-level dropdowns again upon re-clicking).

If you want more detailed information about this, check out this blog post I wrote previously. The referenced jsFiddle there offers a visual aid.

In essence, you have two choices:

Remove the sub-level dropdowns as children of their parent dropdowns and position them so they still appear nested.

--------------------  --------
|A                 | |B       |
|                  | |        |
|                  |  --------
|                  |
|                  |
|                  |
--------------------

OR (recommended for minimal code alteration)

Utilize the stopPropagation() method to halt event bubbling. By applying this to each click event, you can prevent further bubbling. Check out the modifications made in this updated jsFiddle where stopPropagation() is added to the dropdown2() method.

Answer 2

At first, the issue with your jsfiddle not working properly is due to how you have set up the script loading. Changing it to "No wrap - in <head>" instead of onLoad should resolve this.

Secondly, what you are experiencing is a result of something known as propagation. To understand this better, consider two objects, A and B:

--------------------
|A                 |
|     --------     |
|    |B       |    |
|    |        |    |
|     --------     |
|                  |
--------------------

Basically, all events in the DOM bubble up through the parent objects. So when clicking on A, clickA() will trigger. However, when clicking on B, both clickB() and then clickA() will be triggered because B is a child object of A. This jsFiddle example demonstrates this concept by logging events in the console. Therefore, even though your sub-level dropdowns do show up initially, clicking on their parent dropdown labels hides everything (expanding the sub-level dropdowns again upon re-clicking).

If you want more detailed information about this, check out this blog post I wrote previously. The referenced jsFiddle there offers a visual aid.

In essence, you have two choices:

Remove the sub-level dropdowns as children of their parent dropdowns and position them so they still appear nested.

--------------------  --------
|A                 | |B       |
|                  | |        |
|                  |  --------
|                  |
|                  |
|                  |
--------------------

OR (recommended for minimal code alteration)

Utilize the stopPropagation() method to halt event bubbling. By applying this to each click event, you can prevent further bubbling. Check out the modifications made in this updated jsFiddle where stopPropagation() is added to the dropdown2() method.

When you click on a sublevel in the vertical CSS and JavaScript onclick menu, it disappears automatically

Answer №1

Similar questions

Incorrect height of div on iPhone 6 and 7 is observed when utilizing flexbox and setting the height to 100% dimensions

Extracting Client's True IP Address using PHP API

Verify whether an option is chosen in CakePHP 3 form

Using NodeJs to Render HTML Templates and Implement Logic on the Server Side

How can I remove a dynamically added <tr> element using jQuery?

Div blur event for editing content

Having trouble getting a constructor to function properly when passing a parameter in

Is it necessary to mark all checkboxes in the initial column of the gridview?

Go back to the previous operation

Having trouble getting the jQuery script to properly check file size in an HTML form before uploading?

Tips for delivering a variable to a React Native Stylesheet

When using a function linked to an API request, an uncaught TypeError is thrown: Unable to access the 'includes' property of an undefined value

What is the best way to incorporate jQuery's default handsontable into an AngularJS directive?

EventBus emitting multiple times until the page is refreshed

Do not need to refresh the form

The useEffect function is failing to execute, leading to an issue with an undefined variable

Progress bar indicating the loading status of an AJAX script

Align images to the bottom of the gallery only if their heights differ

Unusual default Nav bar positioning

What is the method to determine the size of a file in Node.js?