The menu field remains open even after clicking on the menu

I have encountered an issue with my code.

Here is a DEMO that I created on jsfiddle.net

Currently, when you click on the red div, the menu opens. However, if you click on the menu items, the menu area does not close.

What do I need to do in order to close the menu area when a menu item is clicked?

<div class="p_change" tabindex="0" id="1">
  <div class="pr_icon"><div class="icon-kr icon-globe"></div>CLICK</div>
   <div class="pr_type">
     <div class="type_s change_pri md-ripple" data-id="0"><div class="icon-pr icon-globe"></div>1</div>
     <div class="type_s change_pri md-ripple" data-id="1"><div class="icon-pr icon-contacs"></div>2</div>
     <div class="type_s change_pri md-ripple" data-id="2"><div class="icon-pr icon-lock-1"></div>3</div>
  </div>
</div>

<div class="p_change" tabindex="0" id="2">
  <div class="pr_icon"><div class="icon-kr icon-globe"></div>CLICK</div>
   <div class="pr_type">
     <div class="type_s change_pri md-ripple" data-id="0"><div class="icon-pr icon-globe"></div>1</div>
     <div class="type_s change_pri md-ripple" data-id="1"><div class="icon-pr icon-contacs"></div>2</div>
     <div class="type_s change_pri md-ripple" data-id="2"><div class="icon-pr icon-lock-1"></div>3</div>
  </div>
</div>

JS

$(document).ready(function() {
$('.pr_icon').on('click',function(e){
    // Change Post Privacy 
    $('.change_pri').on('click',function(event){
        event.stopPropagation();
      var dataid = $(this).attr('data-id');
      var id = $(this).closest('.p_change').attr('id');
      var class_name = $(this).find(".icon-pr").attr("class");
      class_name = class_name.replace(/icon\-pr\s+/gi, "");
      $(this).closest(".p_change").find(".icon-kr").removeClass().addClass("icon-kr " + class_name);
      $.ajax({
           type: "POST",
           url: "change_id.php",
           data: { dataid : dataid, id: id }
           }).success(function(html){
            if (html.trim() === "1") {
               // Do Something
             } else {
             // Do something
             }
           });
     });
});
javascriptjquerycssajax

Answer №1

One issue you are facing is the missing braces for the document.ready function, specifically });

Additionally, remember to include this line in the onclick function of .change_pri:

$('.change_pri').on('click',function(event){
 $(this).closest('.pr_type').children().hide();

Take a look at the Updated Fiddle

A noteworthy update:

If you need to display them again, use two distinct classes to distinguish them. In this case, I utilized classes .first_click_content and .second_click_content

Furthermore, it's unnecessary to embed an onclick function of .change_pri within .pr_icon. Separate them instead.

Refer to the revised Newly Updated Fiddle

An additional edit based on your question from the comments section:

To address your concern, simply remove the padding and increase the margin-top

View the updated New Fiddle Link

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

Expand the width of the div element to fill the entire space once the div is concealed

I have 3 different sections. By clicking on "HIDE" in the first section (divChaptersHide), it will be hidden to reveal another smaller section (divChaptersExpand). Then, by clicking on "EXPAND" in divChaptersExpand, it will hide that section and show divCh ...

jqueryjquery-ui

The functionality is verified in Postman, however, it is not functioning properly when accessed from my client's end

I am working on a project where I have a button in my client's application that is supposed to delete a document from a MongoDB collection based on its ID. Here is the backend code for this functionality: index.js: router.post('/deletetask' ...

javascriptnode.jsangularexpressmongoose

What is the best approach to removing a component by utilizing the children prop in React?

I am currently working on a specific scenario: In my project, I have a component called Foo with a property named bar If the bar property is set to true, then I need to display the Bar component that is nested inside the Foo component If the bar prop ...

javascriptreactjsjsx

Does AngularJS have a feature similar to jQuery.active?

As I utilize selenium to conduct tests on my application, I am encountering numerous ajax calls that utilize $resource or $http. It would be convenient if there was a method in angular to monitor active ajax requests so that selenium could wait until they ...

javascriptangularjsselenium-webdriver

Is it possible to utilize a JavaScript framework within a Chrome extension?

Currently, I am developing a chrome extension that adds a toolbar to the DOM dynamically. In order to find, attach, and manipulate elements, I have been using CSS selectors in JavaScript. However, this approach has proven to be fragile as any changes made ...

javascriptangularjshtmlember.jsgoogle-chrome-extension

Ways to block past dates on bootstrap date picker starting from the current date and how to prevent dates beyond 90 days in the future from being selected on the

I am currently facing an issue with disabling previous dates from the current date in my code. While the functionality works well for the "From Date" date picker, I am having trouble implementing the same restriction for the "To Date" date picker after 90 ...

javascripthtmljquerybootstrap-4datepicker

Is there a way to automatically redirect my page after clicking the submit button?

I'm having trouble with the code below. I want it to redirect to NHGSignin.php if 'new horizon gurukul' is entered. When I click the Next button, it's supposed to take me there but it's not working as expected. Can anyone help me f ...

javascripthtmlcss

No action is triggered when the button is hovered over

I've implemented these hover effects but for some reason, they are not working as expected. I'm struggling to understand why this is happening. The primary button at the bottom is also experiencing the same issue. body { background-color: #aa ...

htmlcsshover

Ways to resolve the issue with TypeError: CSS2Properties lacking an index property setter for '0'

I'm currently working on application development using ReactJs and Material UI. When I try to open the application in Mozilla Firefox, an error message pops up saying "TypeError: CSS2Properties doesn't have an indexed property setter for ' ...

cssreactjscross-browsermaterial-ui

Error: Encountered an unexpected token within the node_modules/aws-iot-device-sdk/thing/index.js file

I've integrated the aws-iot-device-sdk into our reactjs application. However, we encountered an error while trying to execute the command NODE_ENV=production npm run compile. The error message I received pertains to a syntax issue in the file paths me ...

javascriptreactjsamazon-web-servicesnpmwebpack

Guide to choosing and unchoosing a div / button using angularJs

I am attempting to create a functionality where items are displayed in a div instead of a list. When an item is clicked, the background color of the div changes and the item is added to a column. Clicking on the item again will revert it back to its origin ...

javascriptjqueryhtmlcssangularjs

What are some techniques for identifying duplicate HTML element IDs?

I encountered a challenging bug that took a lot of effort to resolve, only to discover that it was due to two HTML elements having the same ID attribute. Is there a command available to identify duplicate IDs throughout the entire DOM? Update: After rev ...

javascripthtml

Tips for submitting multiple forms simultaneously using a single button click or by hitting the enter key

I've been looking for a solution or sample code on how to submit multiple forms on a single php page using one submit button or by pressing the enter key, but so far I haven't had any luck. I attempted to use AJAX but couldn't get it to wor ...

phpajaxforms

JavaScript string manipulation function

Hey everyone, I need help finding a one-line solution in JavaScript to determine if a string contains a semicolon without using a loop. If anyone knows how to do this, please share your knowledge! ...

javascript

Refreshing a specific div without refreshing the entire page is currently not functioning as expected

Currently, I am involved in Java Portlets and Websphereportal development On a specific page, there is an option to delete or update a profile picture. The layout of the page consists of two divisions within my JSP file: <div id="fotoDefault" style="d ...

jqueryajaxhtmlrefreshreload

Converting SVG to PNG image directly in the browser (compatible with all browsers, including Internet Explorer)

I am currently working with Highcharts and I have a need to convert all the charts displayed on the webpage into images so that I can send them to my server for merging with a master export Excel file. The Excel file already contains some tables and pivot ...

javascriptjquerysvghighcharts

Troubleshooting WooCommerce's AJAX Error Notification

In the online store I manage, there is a fixed header. If all required fields are not completed at the checkout page, Woocommerce displays an error message using Ajax. However, this message scrolls all the way to the top of the body, ignoring the custom CS ...

jqueryajaxwordpresswoocommerce

The item holds significance, but when converted to a Uint8Array, it results in being 'undefined'

Hey there! I have a Uint8Array that looks like this: var ar = new Uint8Array(); ar[0] = 'G'; ar[1] = 0x123; The value at the second index is a hexadecimal number, and I want to check if ar[1] is greater than zero. So I wrote this code: if(ar[1 ...

javascriptarraysbinaryhex

How does combineReducers in Redux determine which specific portion of the application state to send to the reducer?

While going through the Redux basics tutorial, I found myself a bit confused about how the code snippet below determines which part of the application state should be passed to each reducer mentioned in the combineReducers function. Does it simply rely o ...

javascriptredux

What is the best way to position the underline to appear beneath the second line in mobile view?

I have successfully incorporated a code to add a blue underline to the company name. However, in mobile view, the blue line appears on the first line. How can I adjust it so that it starts from the second line? Below is my CSS code: label { margin: 0; ...

htmlcsssass