JQuery: скрыть элемент на клике в другом месте, кроме элемента

Возможный дубликат:
Как обнаружить щелчок за пределами элемента?

Я пытаюсь добиться того, чтобы div скрывался, если пользователь щелкает где-либо, кроме элемента. У меня следующий код, выполняющий toggle() если пользователь нажимает кнопку. Я хочу, чтобы нажатие кнопки оставалось плюсом, если элемент " Details виден, реагирует на другие части экрана.

$('.nav-toggle').click(function() {
  //get collapse content selector
  var collapse_content_selector = $(this).attr('href');

  //make the collapse content to be shown or hide
  var toggle_switch = $(this);
  $(collapse_content_selector).toggle(function() {
    if ($(this).css('display') == 'none') {
      //change the button label to be 'Show'
      toggle_switch.html('Show Details');
    } else {
      //change the button label to be 'Hide'
      toggle_switch.html('Hide Details');
    }
  });
});

Ответ 1

Вы можете прибегнуть к концепции делегирования событий.

$(function() {
    $(document).on('click', function(e) {
        if (e.target.id === 'div1') {
            alert('Div Clicked !!');
        } else {
            $('#div1').hide();
        }

    })
});

Проверьте FIDDLE

Я не понял, что вы имели в виду под интеграцией с другой частью.. Это основная идея..

Ответ 2

Вы можете использовать функцию jQuery .blur(), чтобы скрыть div, когда пользователь нажимает на другой элемент (например, ссылку, боттон, whathever..)

Событие размытия - это огонь, когда элемент теряет фокус (пользователь выбирает другой элемент в дереве DOM)

Я не понимаю ссылку с вашим переключателем. Если ваша кнопка переключения управляет DIV, внутри функции переключения вы должны поместить hide()/show() в div, одновременно с обновлением текста кнопки.