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

查看Updated Fiddle

修改

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

还有一件事，你不必在onclick内写.change_pri .pr_icon函数。你可以将它们分开。

查看更新的 Newly Updated Fiddle

基于您在评论中提问的新编辑

您只需删除padding并增加margin-top
即可
查看 New Fiddle Link

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

1 个答案: