单击菜单时,菜单字段未关闭

Question

我的代码有一个问题.

我从jsfiddle.net 创建了这个DEMO

单击红色div时,菜单将打开,但如果单击菜单项,菜单区域将不会关闭.

单击菜单时我需要关闭菜单区域？

<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

您缺少document.ready函数的大括号});

你必须在onclick函数中添加这一行.change_pri

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

查看更新的小提琴

编辑：

如果您想再次显示它们，请使用两个不同的类来分别标识它们。在你的例子中我使用了类.first_click_content和.second_click_content

还有一件事，您不必编写insideonclick的函数。你可以把它们分开。.change_pri.pr_icon

查看更新的新更新的 Fiddle

根据您在评论中提出的问题进行新编辑

您只需删除padding并增加margin-top

查看新的小提琴链接