How can I maintain an element in the open position in jQuery slideUp/slideDown function if it has a certain

I am working on a menu that includes both parent and child elements. When you hover over a parent item with children, the submenu smoothly slides down, and when you hover off, it slides back up.

However, I am facing a challenge. How can I modify this jquery so that when a user is on a child page, the submenu remains open by default?

Essentially, I want to have the submenu open on page load if the item has the class "current_page_ancestor".

jQuery(function($) {
$('.side-menu ul > li, ul.children > li, .side-menu ul > li, ul.sub-menu > li').hover(function () {
if ($('> ul.children, > ul.sub-menu',this).length > 0) {
    $('> ul.children, > ul.sub-menu',this).stop().slideDown('slow');
}
},function () {
    if ($('> ul.children, > ul.sub-menu',this).length > 0) {
        $('> ul.children, > ul.sub-menu',this).stop().slideUp('slow');
    }
});

});

http://jsfiddle.net/9s32z8hy/

Answer №1

To enhance the modularity of your code, consider creating functions to handle the opening and closing of menu items. Upon page load, you can check for the presence of a list item with the class current_page_ancestor and then utilize a function to open it:

jQuery(function ($) {
    $('.side-menu ul > li, ul.children > li, .side-menu ul > li, ul.sub-menu > li').hover(function () {
        if ($('> ul.children, > ul.sub-menu', this).length > 0) {
            slideOpen(this);
        }
    }, function () {
        if ($('> ul.children, > ul.sub-menu', this).length > 0) {
            slideClose(this);
        }
    });

    if ($('li').hasClass('current_page_ancestor')) {
        slideOpen('.current_page_ancestor');
    }
});

function slideOpen(item) {
    $('> ul.children, > ul.sub-menu', item).stop().slideDown('slow');
}

function slideClose(item) {
    $('> ul.children, > ul.sub-menu', item).stop().slideUp('slow');
}

Explore the code on Fiddle: http://jsfiddle.net/9s32z8hy/2/

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

JQuery AJAX click event not triggering

I'm currently working on a project to create a dynamic website where users can update text fields directly from the site. However, I've encountered an issue on the 'admin' page where nothing happens when the button is pressed to set the ...

What steps do I need to take to incorporate the Google API into my Chrome extension's content script

I am currently attempting to display labels using the Gmail API within a content script. Below are snippets from my manifest.json and content-script.js files: { "name": "Append Test Text", "description": "Add test123 to body", "version": "1.0", "p ...

Clicking outside the div will cause the div to be hidden

Looking for some help with a jQuery issue. I have a pop-up that opens when a div is clicked, but I want it to close when clicking outside of the div instead of just on the close button. <a class="close-up" href="#" onclick="popup('popUpDiv')" ...

Building a Responsive Page with Bootstrap 4

I'm currently working on a design page with 2 boxes on the left side and 3 boxes on the right. It looks great on desktop, but I want the boxes to display individually on mobile devices and I'm having trouble figuring it out. Here is my code: < ...

Tips for adjusting the header color in materialize framework?

I've been working on a web template and I'm looking to customize the color displayed in the Android browser (maybe using JS?). The default color is blue. How can I go about changing it? https://i.sstatic.net/RxLbS.jpg Appreciate any help! ...

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Is there a way to incorporate images with tagged marks similar to Facebook's image tagging feature? How can I retrieve the X and Y coordinates of tags on the image itself (not the screen) and display them in a responsive manner? ...

Ways to transition into a developer role

I'm currently studying Javascript and Dynamic HTML as part of a course, and while I'm not encountering any errors or warnings in Firefox and Chrome, I believe there might be some issues with my code. If anyone would be willing to take a look and ...

Executing a Shortcode Using a Button in Visual Composer for Wordpress

It should be easy to do this. I've got a great plugin with a modal newsletter signup form that offers various launch options, including manual launching with the following codes. https://i.stack.imgur.com/IGbsp.png My theme utilizes Visual Composer. ...

Submitting content without needing to refresh the page occurs when clicking on a link rather than a button

I am sending parameters from one page to another so that they can be inserted into a table when a link is clicked. I'm interested in knowing if it's possible to use AJAX to call the insert script when text is clicked. I know this can be done with ...

Choosing an option in react-select causes the page to unexpectedly shift

Encountering a problem with a mobile modal developed using react-select. The selectors are within a div with fixed height and overflow-y: scroll. Upon selecting an option for the 'Choose observer' select, the entire modal briefly jumps down in th ...

Why is it that the z-index doesn't seem to affect the stacking order of my background image?

I am facing an issue with my Bootstrap carousel where the z-index is not working as expected. The decoration I have in the background is overlapping the text instead of appearing behind it. I want the illustration to be positioned under the text. .carou ...

Different placeholder text rendered in two text styles

Can an input box placeholder have two different styles? Here's the design I have in mind: https://i.stack.imgur.com/7OH9A.png ...

Turn off and then reinstall Image when clicked

function show(){ alert("i am pixel"); } function disableImgClick(){ $(".Dicon").unbind('click'); } $(document).ready(function(){ $("#turnoff_btn").click(function (e){ e.preventDefault(); disableImgClick(); }); }); i have a group of ima ...

Altering the appearance of a component that is currently selected and in use

Currently, I have incorporated a component with its selector within another component as shown below: <div class="col-xl-4" style="margin-bottom: 30px;"> <app-patient-info-accordion *ngIf="patient" [cardTitle]=&qu ...

Utilizing the power of JavaScript, CSS, and HTML to seamlessly transfer selected items from one webpage to the shopping cart displayed on another page

Due to limitations on using back-end code, I'm seeking advice on how to implement this function. Most tutorials I've come across show the items and shopping cart on the same page. I've heard suggestions about using Jquery.load(), but I&apos ...

Position the image on the right side of several lines of text

My webpage contains two div elements: one for displaying multi-line text and the other for showing an image which is positioned to the right of the text. The width of the image is not fixed and can be adjusted using a user-defined parameter. <div> ...

The absence of jQuery is causing an issue in the webpack +Angular 4+ Asp Core template

I am currently working on a project that was created using the VS 2017 Angular 4 + Asp Core template. I have decided to incorporate a jQuery plugin into my project, which requires me to import jQuery. In my .ts file, I have included the following line of c ...

Retrieve the value of a selected element

I currently have an HTML select drop down that is populated by a JQuery get request. You can see this in action at this link. My goal is to access the specific piece of code for the selected value every time it changes. <small class="text-muted"> ...

How to utilize Bootstrap 5 flex for aligning text in the center position

Within these specific divs: <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3"> <a href="#" title="Falazóhabarcs" class="main_category d-flex justify-content-between align-items-center radius p-3&quo ...

What is the best way to add a custom class alongside cdk-overlay-pane for a material menu in Angular 7?

I have a specific requirement to create a mega menu using Angular Material Menu. I attempted to apply some custom styling to the cdk-overlay-pane using my own class, but it did not work as expected. I tried to add a custom class to the mat-menu element us ...