Блог

У меня есть этот сценарий, в котором у меня есть body тег, который визуально не переносит все содержимое

И у меня есть 3, TR's которые содержат 2 TD's — одно для информационного слова и одно для желтого div.

Нажатие на каждое из них Info TD — открывает div (свою собственную абсолютную позицию).

• когда я нажимаю Info , переключаются желтые окна.

Проблема, которая у меня есть: закрытие желтого div.

Я хочу, чтобы оно закрывалось только при нажатии либо в соответствующем Info TD , либо за пределами желтого div

Как вы можете видеть, нажатие на Info TD уже закрывает div.

Но у меня проблема с внешней областью желтого div.

это то, что я сделал :

 $("body").on('click', ".tdInfo", function (e) //when clicking on tdInfo
{
    var $cached = $(this).closest('tr').find('.myDiv'); //cache the suppose to be open div
    var wasOpen = $cached.is(":visible");
    $(".myDiv:visible").hide(); //hide all previous visible
    if (wasOpen) $cached.slideUp();
    else
   $cached.slideDown(function ()  //when the yellow div open - register once to close only when :not(.myDiv) are clicked
    {
        $("body").one('click', ':not(.myDiv)', function (e2)
        {
            e2.stopImmediatePropagation(); // Parent - ignore me.
            $cached.slideUp();
            return false;
        });
    });
});
  

Вопрос

Приведенный выше код работает не так, как ожидалось. когда я нажимаю на желтый div — он закрывается. Я не хочу, чтобы оно было закрыто.

Единственные ситуации, когда желтый div должен быть закрыт, это когда: щелчок по TD Info или за пределами желтого div.

Полностью работающий Jsbin

примечание: пожалуйста, не пытайтесь изменять высоту или вставлять другие элементы. это точное упрощение моей текущей страницы. Также — я могу найти решение с большим количеством JQ, но я думаю, что это должно быть намного проще.

Я бы сделал это так

 $(document).on('click', function(e) {
    if ( $(e.target).closest('.td').length > 0 ) return;

    var $cached = $(e.target).closest('tr').find('.myDiv');
    var wasOpen = $cached.is(":visible");

    $(".myDiv:visible").hide();

    if ($cached.length amp;amp; (!wasOpen)) {
        $cached.slideDown();
    }
});
  

body Элемент — это элемент с заданными высотой и шириной, как показано в примере OP, и при щелчке за пределами желтых элементов и за body пределами document вы ничего не нажимаете, но все щелчки будут распространяться до document уровня, поэтому вам нужно прослушивать body , а не на, ,.

СКРИПКА

Обнаруживать событие щелчка в элементе yellow box и предотвращать использование по умолчанию:

  $('.YELLOW_DIV').click(function (e) {

    //event handled
    e.preventDefault();

   });