What is the best way to showcase the sub-menu options within this dropdown menu?

function rotateIconMenu(key) {
    ...
}

function displaySubMenuItems(k) {
    ...
}
.menu-part{
        margin-top: 120px;
    }
    .menu-parent{
        color: #a6afbb;
        font-size: 13px;
        ...
     }
<ul class="menu-part">
                    <li>
                        <ul class="menu-parent">--- MAIN MENU

                      <li class="sub-menu-parent" id="sub-menu-one" onclick="displaySubMenuItems(1);rotateIconMenu(1);"><i class="flip-menu-main-icon fa fa-sun-o"></i><span class="sub-menu-header">Dashboard</span> <i id="first-drop-down-icon" class="spinner-icon in fa fa-chevron-right"></i>
                            <ul id="sub-menu-one" class="sub-menu"> 
                               ...
                     </li>

                                   ...

                    </ul>

In the above code, I have implemented a drop-down menu with two functionalities. When clicking on a menu item:

  1. The icon associated with each menu item rotates 90 degrees successfully.
  2. The sub-menu items associated with the corresponding menu item should be displayed (not working).

I have added an alert message inside the JavaScript code to debug any potential issues, but it seems to be functioning correctly. I am looking for ways to resolve this error. How can I fix this?

javascripthtmlcssdrop-down-menu

Answer №1

Your issue seems to stem from the repeated use of the ids sub-menu-one, sub-menu-two, etc. These ids should be unique and only used once in your HTML code. The outer list with class sub-menu-parent should not have an id equal to the child ul id, as removing the id from the parent will allow the submenu to display correctly.

Additionally, there may be some copy-paste errors in your HTML code, such as the child ul list of parent 2 having an id of sub-menu-one.

https://jsfiddle.net/qp4g5wuw/1/

Answer №2

Upon reviewing your code, I noticed that you have created two id elements with the same name, causing an issue.

I made some modifications to your code and it is now functioning correctly. Take a look:

I initially changed the id names in the following section of your code:

<li class="sub-menu-parent" id="sub-menu-one" onclick="displaySubMenu(1);rotateIcon(1);"><i class="flip-menu-main-icon fa fa-sun-o"></i><span class="sub-menu-header">Dashboard</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i>
...

You'll notice that I swapped out "sub-menu-one" for "menu-one," and so forth...

Additionally, I tweaked some portions of your JavaScript code due to duplicate ids :P

Here is your updated code:

JavaScript

function rotateIcon(m) {
  var key = m;
if ( key === 1)
  {
   if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-chevron-right")
     {
       document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right";
       }
    else
      {
         document.getElementById("first-drop-down-icon").className = "spinner-icon in fa fa-chevron-right";
         //additional code changes here
        }
...

HTML Form

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
...

I hope this clarifies everything. I had to rush through it :P

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

Encountering Angular Material UI issues following the transition from version 11 to 12

I am currently in the process of updating my Angular application from version 11 to 12, integrating Angular Material, and encountering some error messages: Error No.1 - Error NG8002: Cannot bind to 'ngModel' as it is not a recognized property of ...

javascriptangulartypescriptangular-material

Customizing Tabs in Material UI v5 - Give your Tabs a unique look

I am attempting to customize the MuiTabs style by targeting the flexContainer element (.MuiTabs-flexContainer). Could someone please clarify the significance of these ".css-heg063" prefixes in front of the selector? I never noticed them before upgrading my ...

javascriptreactjstypescriptmaterial-ui

showing information retrieved using the fetch function

Currently, I am attempting to retrieve the user's input value from a search box and then proceed to use this variable in my endpoint to retrieve data. <input type="text" class="search" placeholder="planet"> <script> const media = &apo ...

javascripthtmlajaxapi

Ensuring Data Accuracy in Angular 2 Forms

Currently, I am working on form validation using Angular 2 and encountered an issue with the error message Cannot read property 'valid' of undefined. The HTML file I am working on contains a form structure like this: <form id="commentform" c ...

htmlvalidationtypescriptangular

What is the reason for the enhanced sharpness of fonts in Chrome compared to other browsers?

I couldn't find an answer to this question through my searches on Google, so I apologize if it's already been asked. I've been working on a web project recently and one thing I noticed is that the fonts appear much bolder in Firefox or Safar ...

htmlgoogle-chromefirefoxsafaritypography

Identifying the operating mode of Webpack within JavaScript documents

Currently in the process of creating a collection of ReactJS files using Webpack. Trying to figure out if there's a way to identify within JSX files which mode Webpack is currently running in: "none", "development", or "production"? Specifically, I& ...

javascriptreactjswebpack

Drupal 7 FlexSlider - alignment issue with image placement

I am encountering an issue with the Flexslider module on my Drupal 7 website. I have created a simple slider that displays 3 photos. I enabled touch screen functionality for the slider, and everything seems to be working fine except for one problem - all t ...

jquerycssdrupaldrupal-7flexslider

Execute a JavaScript function from within a React component using text/javascript

I am trying to incorporate a React component into a plain HTML page served by Flask. Everything works fine during development with Gulp, but now I want to integrate a specific part into my Flask app. In my app.js, I have the following code: var RenderX = ...

javascriptreactjs

The presence of the !doctype html tag completely messes up my

I am currently working on a code snippet that is supposed to provide the screen coordinates of a given object: <!DOCTYPE HTML> <html> <head> </head> <body style="margin:0px;padding:0px;"> <div id="help" style="top:100px;r ...

javascripthtmlcss

Additional unnecessary event listeners (deleteComponent) were provided to the component but could not be inherited automatically

Dear community, I am facing an issue with emitting events from my child component to the parent. Strangely, all other components work perfectly fine with the same code except for this particular one. Let me provide you with the relevant code snippets: Ch ...

javascriptvue.jsvuejs3

What is the best way to apply toggle function to reveal hidden elements?

Imagine you have an HTML page with a button on it. When the button is clicked, a toggle appears containing another button: (Code inside the toggle) <button id="new">New</button> You try to remove this button using jQuery: $('#new' ...

javascriptjqueryhtmltoggle

Step-by-step guide on visually comparing two iframes for differences

Scenario : In my project, I am dealing with 2 iframes that contain a significant number of divs and other controls, making both iframes similar in size to complete HTML websites. My goal is to compare these two iframes and identify any differences. Consi ...

javascriptpythonhtmlselenium-webdriveriframe

What steps do I need to take to build this jump page?

Disclaimer: I have very little experience with coding. As a self-taught graphic designer, I have only managed to create a simple page that helps me store common phrases I use frequently throughout the day. It was quite a challenge for me. I am currently w ...

javascripthtmljquerycss

What is the best way to increase the height of a div up to a specific point before allowing it to scroll?

Is there a way to make a div expand to fit its contents up to 250px and then scroll if necessary? I attempted using the following CSS: text-overflow: ellipsis; max-height: 250px; overflow-y: scroll; However, this solution doesn't achieve the desired ...

htmlcssscroll

I am encountering issues with an HTML table that is in need of fixing, and I must find a solution without relying on

Can someone help me troubleshoot the structure of this table in the given image? It seems like my rowspan and colspan attributes are not working as expected. I've only used CSS to specify the width and height of the cells. https://i.sstatic.net/VtHbH ...

htmlhtml-table

extracting information from an external document

I'm quite new to both three.js and JavaScript, so please bear with me if this is a simple question. I have a JSON file with a list of objects containing data like this: [ { "x":x,"y":y,"z":z ,"r":r}, { "x":x2,"y":y2,"z":z2 ,"r":r2}, { "x":x3,"y":y3, ...

javascriptthree.js

Vue.js: The Power of Manipulating Strings

Why is the filter method not working with this.userId, but it is working with the hard-coded value "admin"? How can I resolve this issue? computed: { UidMessages: function() { return this.Messages.filter(function(m) { return m ...

javascriptvue.js

Utilizing ng-model and ng-repeat in AngularJS to populate models with a list of objects

I need to call a POST function, and I have to compress the data in a web form into an object beforehand. I utilized ng-repeat to showcase all inputted data and initialized this value for input, but I am unsure how to utilize ng-model to store the data. I c ...

htmlarraysangularjsjsonfrontend

Discord bot struggling to reach every user in the server

After creating a discord bot with Discord.js, I was able to retrieve all the users from my server. However, lately I noticed that it is only returning 59 members out of the 300+ in total. I want to ensure that I am able to access all the users as before. ...

javascriptnode.jsdiscord.js

Generating columns dynamically in Angular Material 2

Exploring the functionalities of Angular Material ng-table, I am interested in dynamically generating columns. The code snippet provided below demonstrates a table template with statically defined columns. My goal is to replace these column definitions wit ...

javascriptjsonangularangular-material2