The menu field does not close when the menu is pressed

Question

I have one question with my code.

I created this DEMO from jsfiddle.net

When you click the red div, a menu will open, but if you click the menu items, the menu area will not be closed.

What do I need to close the menu area when I click on the menu?

<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 } }); }); }); 

Answer 1

You are missing document.ready functions });

And you should add this line to the onclick .change_pri function

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

View Updated Script

EDIT:

If you want to show them again, use two different classes to identify them separately. In your example, I used the .first_click_content and .second_click_content

And one more thing: you do not need to write the onclick .change_pri function inside .pr_icon . You can separate them.

Check out the updated version of the recently updated scripts.

New EDIT based on your question in a comment

You just need to remove the padding and increase the margin-top

Check New Script Link