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

Question

我对我的代码有一个疑问。

我创建了这个 DEMO 来自 jsfiddle.net

当您单击红色 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