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