Struggles with closing dropdown menus

How can I modify my drop down menu so that the first drop box closes when a new link is clicked? Additionally, how do I ensure that the menu closes when clicking on a child item without refreshing the page (since the content is dynamically pulled from a database)?

 $(document).ready(function(){
 $("#top-nav li").toggle(function(){
 $("ul",this).show();
 $("a.top-nav-link", this).addClass('selected');

            }, function(){$('ul',this).hide();
    $("a.top-nav-link", this).removeClass('selected');
            }); });
    <ul id="top-nav">
<li>
    <a href="#" class="top-nav-link">INDIAN</a>
     <ul>
      <li>
                <div class=" one-wrap set-column">
              <a href="#" >INDIAN</a>
             <a href="#" >CHINESE</a>
             <a href="#" >ITALIAN</a>
             <a href="#" >PUB FOOD</a>
             <a href="#" ></a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
                  <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
              <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>


           </div>
       </li>

    </ul>

  </li>
           <li>
               <a href="#" class="top-nav-link">CHINESE</a>

               <ul>
               <li>
                  <div class=" two-wrap set-column">
              <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
                  <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
              <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
             <a href="#" >Menu</a>
           <a href="#" >Menu</a>
           </div>
           </li>
           </ul>
           </li>
jquerycss

Answer №1

To ensure that only one drop-down menu is open at a time when a link is clicked, you can close all existing menus and then reveal the intended menu:

$("#link").click(function() { 
  $(".dropdown").slideUp(); #hides any currently open drop-down menu
  $(".dropdown#specific_to_this_link").slideDown();
});

As for your second inquiry about collapsing the parent menu when a link within it is clicked:

$(".dropdown .child").on('click', function() {
 $(this).parent().slideUp();
});

Keep in mind that the live method has been deprecated and replaced by on.

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

When Jquery JSON DOM fails to load data

I've been trying to implement this functionality on my website by following various tutorials, but I am facing an issue where the data is not displaying anywhere. Initially, it was showing the return value of json_encode, but now it's not even do ...

javascriptphpjqueryjson

`Inquiry into AJAX form submission problem`

Here is the HTML markup and JS code for my signup page. I encountered an issue where, if I leave all text inputs blank and click submit for the first time, it validates and shows an error message. However, when I click submit a second time, it directly sen ...

javascriptajaxjquerypost

Buttons aligned vertically alongside an input text field

I am trying to align two buttons vertically under an input text box with the middle aligned. This is what I have done so far: jQuery(document).ready(function($) { // Implementing bootstrap minus and plus plugin // Reference: http://jsfiddle.net/lael ...

javascriptjqueryhtmlcss

What could be causing the issue of my navbar text not changing color using CSS?

Despite several attempts, I am unable to change the color of the hyperlinks in blue or purple using the HTML and CSS below. Can anyone point out what I might be missing? nav ul { /* Navbar unordered */ list-style: none; text-align: center; backgr ...

htmlcsslisthtml-lists

What is the best way to delete HTML classes that were generated by a function?

Currently, I'm immersed in the Etch A Sketch project as part of my journey through The Odin Project. Using DOM manipulation, I successfully created a grid and displayed it on the screen. Now, my aim is to allow users to resize the grid by removing the ...

javascripthtmlcssdom

What is the method for altering the color of just the text in an anchor link?

Here is the code snippet I’m working with: <a href="#" title="some title"> <span>Do not change color of this text</span> Want to only change this text color </a> I am trying to change the color of the anchor tag text only, w ...

csshover

Differences in Behavior of jQuery Element Styles in Firefox and Chrome When Modals Are Visible

I'm new to working with jQuery and JavaScript. Currently, on my website, I have implemented several unique modal/popups that are activated using a CSS :target selector, which changes their display property to block. Additionally, I am attempting to us ...

htmljquerycssgoogle-chromefirefox

Change the css code to override the color of the background material

Hey there, I'm facing an issue with overriding the background color of a material element. I've tried several methods but can't seem to get it to change. After inspecting the element on the web browser, I found the CSS code that controls th ...

cssmaterial-ui

What is the best way to select and style individual HTML elements using CSS?

Having trouble editing a Validations Form in Ionic 4 with CSS. It seems that only the form elements are targeted after clicking on the form group. Attached below are the form states before and after click. I'm unable to style the form elements before ...

htmlcssangularionic4

Adding a class to unhovered elements with jQuery/JS: a step-by-step guide

I have a variety of elements that are almost working how I want them to. There are four divs in total. Depending on the URL visited, I want a specific div to be fully transparent/active. The next div in line should animate in and out of transparency simul ...

javascripthtmljquerycssanimation

When a button is clicked, load two separate pages into two distinct divs at the same time

$('#menuhome').click(function(){ $('#leftcolumncontainer').load('pages/homemenu.php'); }); the code above is used to load the home menu on the left side. Now, let's add the following: $('#menu ...

javascriptjqueryhtmlcss

Verifying the visibility status of a div and toggling a class based on it

I'm facing a challenge with multiple checkboxes in a row. When a button is clicked, it displays a div (#locale_container), and flips a small arrow by adding a rotated class. However, I only want the arrow to flip when the div is being shown or hidden ...

javascriptjqueryhtml

Ways to incorporate a conditional statement within a dropdown menu

When a user interacts with a dropdown, I want to conditionally show different choices based on their selection. If the user clicks on a checkbox, a specific set of options will appear; if they click on a radio button, another set of options will appear. h ...

javascriptjqueryhtml

When viewing a page in IE 9 within a frame, not all CSS styles are properly rendered, causing it to enter Quirks mode

When a web page is loaded within a frame, not all of its styles are applied. The specific stylesheet used for the div elements is as follows: div.super{ position:absolute; font-family: Helvetica; font-size: 0.75em; padding:4px; overflo ...

cssinternet-explorer-9framesquirks-mode

Position a span within a container div and ensure that it remains centered even in cases of overflow

I need assistance with centering text horizontally next to an image inside a container div that is 40px x 40px. The anchor tag contains the image with matching dimensions, and below it is a span with text. I've tried using text-align: center, adjustin ...

htmlcss

Problem with Active State of DOM Element

My goal is to create an effect where clicking on a DOM element, specifically a list, will cause the target list to rotate and remain in that position. Describing it can be a bit challenging, so I have provided a visual example of what I'm working on ...

jqueryhtmlcss

Tips for concealing the top button on a mat calendar

I have a calendar for a month and year, but when I click on the top button it also displays the day. How can I hide that button or instruct the calendar not to show the days? Check out this image I was thinking of using a CSS class to hide that element. ...

cssangularangular-material

PhoneGap nested executeSql not functioning properly on iPad Simulation

My application seems to be working perfectly in Win-Safari, but encounters issues when wrapped by PhoneGap. Below is the code snippet: // working db connection db.transaction(function(tx) { tx.executeSql('SELECT * FROM tbl', [], function(tx, r ...

jqueryipadhtmlsqlitecordova

The order of execution is not maintained for $.getJSON() calls within the $.each() loop

As I iterate through an HTML table, I am making a $.getJSON() request based on the data in each row. My goal is to retrieve the data from that $.getJSON call and update the corresponding row with it. Unfortunately, when I run my code, it seems to be execu ...

javascriptjqueryajaxgetjson

Sending an error code that is specific to the situation to the AJAX error function

I am attempting to send a custom error code to the client-side for ajax error handling. On the server side: $response = array(); if ( empty($post['parent_id']) ) { $response = array('error' => true, 'status_code' => ...

javascriptphpjqueryajax