Maintain the active menu open when navigating to a different page on the website

My website has a dropdown menu, but whenever I click on a submenu link, the new page opens and the menu closes. However, I want the active menu to remain open on the new page of the website!

To demonstrate what I have tried in a simple way, I created an example on JSFiddle: Example

HTML:

<ul id="menu">
    <li> <a href="javascript:void(0);" class="clickme">Click me 1</a>

        <ul style="display:none">
            <li><a href="#">Dropdown link</a>

            </li>
            <li><a href="#">Dropdown link</a>

            </li>
        </ul>
        <li> <a href="javascript:void(0);" class="clickme">Click me 2</a>

            <ul style="display:none">
                <li><a href="#">Dropdown link</a>

                </li>
                <li><a href="#">Dropdown link</a>

                </li>
            </ul>
        </li>
</ul>

AJAX:

$(document).ready(function () {

    $('#menu li > a').click(function (e) {

        if ($(this).next('ul').length > 0) {

            e.preventDefault();

            var subNav = $(this).next('ul');

            if (subNav.is(':visible')) {
                subNav.slideUp('normal')
                $(this).removeClass("selected");
            } else {
                $('#menu ul:visible').slideUp('normal');
                subNav.slideDown('normal');
                $("a.selected").removeClass("selected");
                $(this).addClass("selected");
            }
        }
    });
});

Any assistance with this issue would be greatly appreciated!

Answer №1

To update the new page, simply delete the style="display:none" attribute from the relevant ul based on the specific requirements of the page. Since this is a separate page, it will not impact the main page.

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

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Lately, I've been facing a strange issue with using a checkbox that collapses a hidden div by utilizing bootstrap. When I include the attribute data-toggle="collapse" in the checkbox input section, the div collapses but it mandates every single one o ...

Bot is being inundated with messages containing no content

My discord.js version is 14.0.3. I'm facing an issue where the message content is not being retrieved correctly. To solve this, I set up a client.on('messageCreate') event handler: client.on('messageCreate', async (message) => ...

Retrieve JSON object by matching another JSON property

I am working with an array of id's and their respective contents in a JSON response. My goal is to retrieve the content based on the received id. For instance, if the ID is 1 (returned from the JSON), I aim to access the JSON data using "data.id" (wh ...

Adjusting the styling of a webpage in real-time

Here is the CSS code I am working with: .myTabs .JustForFun .ajax__tab_inner:hover { width: 109px; background: url ("/images/csc_tr.png") no-repeat 100% 0%; margin-right: 2px; background-color: #BBC614; } I want to change the background-c ...

Enhance your data table by updating the content without the need to refresh the entire page in CodeIgniter

Every time I update or insert data using the bootstrap modal form and ajax, the entire page reloads. Instead of refreshing the whole page, I want only the data table to be refreshed. Below is my ajax script: <script> $(document).ready(function( ...

Unable to transfer errors from API response to Formik error display

I am currently using React, Formik, and yup to send data to a REST API. This is the structure of my React component: import React from "react"; import { render } from "react-dom"; import { Formik, Field, Form, ErrorMessage } from "formik"; import * as ...

Encountering numerous errors when attempting to incorporate lottie-web into my JavaScript file

I am in the process of creating a unique audio player for my website utilizing HTML, CSS, and JavaScript. I encountered some challenges while trying to get it to work effectively on Codepen as well as my text editor. The animations were not functioning pro ...

Encountering a problem while trying to launch the development server for a React application using the npm-start

I followed the steps to create a react application using npx create-react-app myapp, but when I use npm start, it fails to start a developer server. Even after trying to reinstall the node_modules, the issue persists. I am using the latest versions of Reac ...

What is the resolution process for importing @angular/core/testing in TypeScript and what is the packaging structure of the Angular core framework?

When using import {Injectable} from '@angular/core';, does the module attribute in package.json point to a file that exports injectable? Also, for the format @angular/core/testing, is there a testing folder within @angular/core that contains anot ...

What could be causing my object to not be added properly to a select element using JavaScript programmatically?

When it comes to customizing your pizza, the options are endless. From selecting the type of crust to choosing your favorite toppings, every detail matters. One common issue that arises is when changing the crust type affects the available sizes ...

Ways to implement a user interface modification immediately following a jQuery effect event

My jQuery UI element has a bounce effect with a color change. After the bounce finishes, I want to set the color back to normal. Is there a way to achieve this? $(div).effect("bounce", { times:2 }, 200); Are there any event handlers in jQuery that are ...

Steps for updating the property "project_id" within a nested JSON array to "project_name"

Issue: [ { "project_id": 1, "project_name": "CDP", "role": "PL" }, { "project_id": 2, "project_name": "Admincer", "role": "PM" }, I am trying to extract the "project_id" property from the above JSON array and add it to another array using a specific ...

Tips for extracting the content from a <span> tag within an iframe

In my setup, I have two iframes labeled Test1 and Test2. Each iframe contains the following code snippet with the goal of retrieving the value '24' from it. <div class="Test-font"> <h6 class="Test_something d-inline">Available MQ ...

Tips for implementing vue.js composition api with vue-3-socket.io

Is there a way to access the socket instance within the setup function of a Vue.js component? I am utilizing vue-3-socket.io in my main.js import VueSocketIO from 'vue-3-socket.io' import SocketIO from 'socket.io-client' Vue.use(new ...

``Troubleshooting: Problem with Rails checkboxes and error-ridden fields

Hello there! I've encountered an interesting problem that I've traced back to using a custom bootstrap checkbox. Everything works fine, except for when I try to submit the form without checking the checkbox and receive an error message. After thi ...

Using JWPlayer 6 and JWPlayer 7 simultaneously in one project - how is it done?

Trying to incorporate both JWPlayer 6 and JWPlayer 7 into my expressJS, AngularJS project has been a challenge. While they each work independently without issue, bringing them together has proven to be tricky. In my index.html file, I include them separat ...

What is the best way to activate a function from a modal component without having the function embedded in Angular 14?

I've recently been putting together an e-commerce application using Angular 14. Currently, I'm tackling a form that must only be submitted once the user accepts the "Terms & Conditions" shown in a modal popup. The FormComponent and ModalCompone ...

Utilizing conditional statements for confirming purchased orders with a pop-up confirmation box

function purchaseClicked() { var orders = prompt("Are you sure you want to buy these Items?"); if (orders != null) { alert('Please try selecting your items again!') } else { alert('Thank you for shopping ...

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

Looking to highlight a range of days horizontally in jQuery UI Datepicker with the multiselect plugin. To achieve this, I am utilizing the :before and :after pseudoelements of the a tags. .ui-state-highlight a:before, .ui-state-highlight a:after { con ...

Unable to dispatch the form on a connected page using jQuery Mobile

I have encountered an issue while trying to submit a form using jQuery Mobile. The problem arises when the form is placed on a linked page, as it fails to submit properly. To illustrate, if my home page is mysite.com/page.html, placing the form code on tha ...