Menu field is not closing, when clicked on menu

Question

I have one question with my code.

I have created this DEMO from jsfiddle.net

When you click the red div then the menu will opening but if you click the menu items the menu area will not closing.

What do i need to close the menu area when clicked 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 the document.ready function's braces });

And you have to add this line on the onclick function of .change_pri

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

Check out the Updated Fiddle

EDIT:

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

And one more thing, you do not have to write an onclick function of .change_pri inside .pr_icon. You can separate them out.

Check out the updated Newly Updated Fiddle

New EDIT based on your question in comment

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

Check out the New Fiddle Link