Проблема сокрытия div-а, инициируемого кликом, когда в любом месте страницы щелкают, сохраняя при этом все выбираемое

Question

Скажем, меню вызывается при нажатии кнопки, теперь

1_ Чтобы отменить его, пользователь должен иметь возможность щелкнуть в любом месте страницы (не только на той же кнопке),

2_ Все остальное на странице должно оставаться доступным для выбора в течение всего этого процесса.

Вот что я пробовал:

$(".dad").click(function() {
  $(".son").show();
  $(".mask").show();
});
$(".mask").click(function() {
  $(".son").hide();
  $(".mask").hide();
});

.dad {
  background: greenyellow;
  width: 20px;
  height: 20px;
  margin-top: 100px;
  z-index: 2;
}

.son {
  position: relative;
  left: 20px;
  bottom: 100px;
  width: 100px;
  height: 100px;
  display: none;
  background: tomato;
  z-index: 2;
}

p {
  z-index: 2;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>

<p>This is a paragraph</p>
<div class="dad">
  <div class="son"></div>
</div>
<div class="uncle"></div>
<div class="mask"></div>

Этот код удовлетворяет первому условию («.son» прячется, когда в любом месте страницы нажимается), но второе условие не встретил. Потому что, когда «.son» виден, абзац не может быть сразу выбран, если пользователь не щелкнет еще раз. Хотя это кажется незначительной проблемой, иногда это может стать немного раздражающим, поэтому является требованием. (Я также пробовал другие способы. Например, CSS «указатель-события: нет» на маске, но у него другое назначение, потому что он также отменяет события щелчка). Так как это можно сделать? Заранее спасибо.

Примечание. Это не только вопрос CSS, я также принимаю любые ответы Javascript или Jquery, если они дают более простые / лучшие решения.

Answer 1

Надеюсь, что это полезно ...

$(".dad").click(function() {
  $(".son").show();
});
$(document).click(function (e) {
    var container = $(".dad"); 
    if(!container.is(e.target) &&  
    container.has(e.target).length === 0) {
        $(".son").hide();
    }
});

.dad {
  background: greenyellow;
  width: 20px;
  height: 20px;
  margin-top: 100px;
  z-index: 2;
}

.son {
  position: relative;
  left: 20px;
  bottom: 100px;
  width: 100px;
  height: 100px;
  display: none;
  background: tomato;
  z-index: 2;
}

p {
  z-index: 2;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>

<p>This is a paragraph</p>
<div class="dad">
  <div class="son"></div>
</div>
<div class="uncle"></div>