单击body时，父div和子div在单击时保持隐藏状态

Question

HTML

  <div class="parent opt">
    <div class="child opt" id="1">
        <li>options 1</li>
        <li>options 2</li>
    </div>
   </div>

<div class="parent opt">
    <div class="child opt" id="2">
      <li>options 1</li>
      <li>options 2</li>
    </div>
</div>

jquery的

 function toggleDiv() {
   var id = $(this).children().attr('id');
    $(".dropdown-options").hide();
   $("#"+id).toggle();
}

$('.parent').click(toggleDiv);

我的目标是点击页面正文并且div消失，所以我尝试了这个。

$("body").click(function (e)
{ 
var container = $(".opt");
if(e.target.className!=container.attr("class")){

    toggleDiv().hide();
    }
});

setback ::当我点击子div来选择一个选项时，它会消失，我如何让它留下以便我可以选择一个选项。请帮忙

Answer 1

甜蜜的方式......

$(document).ready(function(){
    var flag=true;
    $(".parent").click(function(){
        flag=false;
    });
    $("body").click(function(){

        if(flag) $(".parent").hide();
        flag = true;
     });
});

这是你的一个非常混乱的代码。隐藏父div也会隐藏子div。