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

The Bulma calendar date input fails to display the pre-filled start date

An external script containing icons is supposed to load automatically when the page is loaded, but unfortunately, the icons fail to display

Output PHP variable in JavaScript (and show the value within an iframe)

Error message appears when attempting to duplicate vertices in a THREE.Geometry object: 'Vector is not defined'

What will occur if I use an XMLHttpRequest to request a file that is currently being downloaded?

Determine using Lodash whether there is an object in an array that matches the ID from a separate array

The instance is referencing "underscore" during render, but it is not defined as a property or method

Stopping the loop: Disabling the SetInterval function with ResponsiveVoice code in JavaScript

Transferring a JSON value to PHP and saving it in a MySQL database

Unique background image for every individual page

How can I incorporate a vertical line divider and a legend into a curved box using HTML and CSS?

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Utilizing long polling technique with jQuery/AJAX on the server end

Iterating over an array of objects and executing asynchronous operations

Is there someone who can explain to me the process behind this?

Jquery's ajax function is failing to execute the server side function

Concealing excess content in a vertical container with margins

Thymeleaf: Expression parsing error

Ways to hide notifications by setting a timer while keeping the delete option visible

Remove a row from a Jquery Jtable