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

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 函数的大括号});

而且你必须在.change_pri的onclick函数上添加这一行

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

查看Updated Fiddle

编辑：

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

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

查看更新后的Newly Updated Fiddle

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

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

查看New Fiddle Link