Keep the sub menu open by clicking within the submenu

Is there a way to prevent the menu from moving up when I click inside the submenu? (The submenu will slide up when you click on the main link or outside of it.) Is it possible to achieve this without using javascript? And then have the menu overlap and function with hover if javascript is disabled.

VIEW FIDDLE

SOLUTION:

$('.nav > ul').toggleClass('no-js js');
$('.nav .js ul').hide();

$(document).on("click", function(e) {
    var $elem = $(e.target);
    if ($elem.hasClass('clicker')) {
        $('.nav .js ul').not($elem.next('ul')).hide();
        $elem.next("ul").slideToggle();
    } else {
        $('.nav .js ul').hide();
    }
})

Answer №1

To make a simple adjustment, just modify the condition to ensure that the clicked element is not within that container and is not the container itself. Since there are multiple elements with the same Id, it's recommended to change them to a class

<div class="contentHolder">

then your jQuery code should look like this:

else if (!$($elem).parents('.contentHolder').length && !$elem.hasClass('contentHolder')) {

Also, remember to change the CSS from #contentHolder to .contentHolder

Check out this jsFiddle for an example.

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

What is the best way to choose all div elements that come after a certain number of preceding div elements?

Here is a code snippet from my current project. I have dynamic elements loading into a container div through PHP from a MYSQL database. <div id="itemContainer"> <div class="item"> test </div> <div class="item"> ...

Using Protractor to extract text from multiple paragraphs

How do I retrieve the values of all paragraphs (p) at once? Below is an example of how my inspect view appears: "Testing sample one." "Testing sample two." And here is a snippet of my code to extract the value of id 'run': browser.findElement ...

Decrease in internal width

Seeking assistance to adjust the internal border width for better text alignment. I've been struggling with this issue as a beginner in the web development field and would appreciate some guidance. Link to image Here is a snippet of my HTML code: & ...

Unexpected format of _id is returned by Mongolian DeadBeef .toArray() method

My love for Mongolian deadbeef is strong, but I'm facing a challenge. I want the output of a simple .find() method to match the JSON format from Mongo's command line: $ db.mycollection.find(); # outputs.. # { ...some data... , "_id" : ObjectId(" ...

Rotate the image as you swipe left or right with Angular's ng-swipe-left and ng-swipe-right features

I am currently utilizing angular's ng-swipe-left and ng-swipe-right to detect swipe events on touch devices. My goal is to rotate an image based on the speed and direction of the swipe while it is still in progress. However, I am facing a challenge as ...

Enforce a limit of two decimal places on input fields using jQuery

Looking to limit an input field so that users can only enter numbers with a maximum of two decimals. Is it possible to achieve this using jQuery? Any way I could utilize the jQuery toFixed() function for this purpose? Thank you in advance! ...

Is there a way to troubleshoot the issue pertaining to using routerLink in Angular version 17.2?

Currently working on a small app, but encountering an error with routerLink in the console. I am new to angular and seeking help. ✘ [ERROR] NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'. Here is ...

DOMPDF rearranges the order of HTML elements

I am currently using Laravel and working with an HTML view that includes integrated CSS. My goal is to convert this view into a PDF format. When I open the view directly (whether through my documents or a link in my application), everything displays correc ...

What is the best way to align the centers of these text pieces vertically next to a toggle switch?

Query: I'm feeling a bit out of practice with CSS, so this might be an easy question. This is the current look of the relevant section on my page. https://i.sstatic.net/Y0hj9.png To make it easier to analyze, I've extracted the code into a JS ...

Mantine UI: Elevate Your Component Library Experience

I am in the process of creating a Component library for internal company projects, which will be packaged as an npm package. To kick things off, I am starting with Mantine and plan to incorporate customization using tailwind CSS. As a test, I have created ...

Textarea Colspan Not Functioning as Expected

Currently, I am tackling a project in ASP.NET MVC where the colspan for textarea seems to be ignored despite setting it as colspan="2". CSS table { border-collapse: separate; border-spacing: 0; } td { position: relative; ...

Adjusting the page view when a collapse is opened

I am working on a website that features 3 images, each of which opens a collapse below with an embedded iframe website inside when clicked. I am trying to implement a function where the site automatically scrolls down to the opened iframe when an image is ...

Encountering the error "TypeError: Router.use() is expecting a middleware function but received undefined" when attempting to import a router from another file

Trying to configure a router for user paths and exporting it for use in index.js is causing an error. The following error message is displayed: C:\Users\yugi\OneDrive\Documents\codes\NodeJs\API_nodejs\node_modules&bs ...

Examining a React component through unit testing using Jest and Enzyme

I am currently conducting unit tests on a React component. One component is importing another and utilizing its props. Below are the JSX files: class First extends React.PureComponent { render() { const { name, isSelected, onClick } = this.pro ...

What causes programming languages to exhibit such behavior in the absence of any established hierarchy?

I was puzzled to discover that in Python and Javascript, when using this type of conditional statement, the logic seems off. If we add console.log statements in each condition, it appears that the comparison should be false != true, meaning that the code s ...

Creating a dynamic slider using jQuery

Here is the code snippet I have been working on: var current_slide = 1, animation_time = 1000, pause = 3000, slide_container = $('.slide_container'), interval, height = slide_container.height(), slides ...

Is it necessary to generate a file for each API in Next.js?

When working with Next.js, it is common practice to create a separate file for each new API endpoint. For example, for the /user endpoint, there would be a user.js file with its own handler, and another one for /user/goldmember. Some may argue that this ...

Error: anticipated {} as a valid function

Encountering an unfamiliar error while using Mocha with Chai for the first time has thrown me off guard. Having prior experience only with Jasmine, I'm struggling to pinpoint what mistake I might be making. My objective is simple - ensuring that my c ...

Call a function of a javascript object from inside a callback function

In a user script, I have defined the MyClass and its methods as follows: function MyClass() { this.myCallback = function() { alert("MyClass.myCallback()"); }; this.startRequest = function() { GM_xmlhttpRequest({ &a ...

Exceeding the boundaries: Bootstrap 4 Tooltip escaping the div

When hovering over an anchor tag with tooltip attributes, the tooltip appears far away from the anchor tag. Here is the LINK - Even when inspecting element it seems to be positioned too far away. <a class="btn btn-secondary" data-toggle="tooltip" dat ...