Jquery: Как скрыть div, когда пользователь нажимает на что-либо, НО этот div.Без наложения - PullRequest
Новая
       10

Jquery: Как скрыть div, когда пользователь нажимает на что-либо, НО этот div.Без наложения

2 голосов
/ 05 апреля 2011

Я думаю .one было бы полезно в этой ситуации? но я не уверен, как это сделать ...

У меня есть окно поиска, которое появляется при нажатии на ссылку поиска. Я хочу, чтобы пользователь мог нажимать на что-либо в этом элементе, не закрывая его, но когда пользователь нажимает на что-либо за пределами этого элемента, элемент исчезает.

Ответы [ 6 ]

6 голосов
/ 05 апреля 2011

Эмм, вот пример , который работает на div.

В нем используется глобальная переменная, поэтому я не горжусь, но это быстро реализуется.

EDIT Обновил мой код, теперь нет глобальной переменной, он все еще быстр в реализации.

0 голосов
/ 05 апреля 2011

Полный ответ демо находится по адресу: http://jsfiddle.net/leonxki/kSarp/

Но вот фрагмент кода jquery, который имитирует ваши требования: 

(function toggleSearchField() {
var $searchBoxDiv = $('#searchBoxContainer');

$(document).bind('click', function(evnt) {
    var $target = $(evnt.target);

    if ($target.is('#toggleSearchOn')) {
        $searchBoxDiv.fadeIn();
        return;
    } else if ($target.is('#searchBoxContainer') || $searchBoxDiv.has(evnt.target).length) {
        return;
    }

    $searchBoxDiv.hide();
});})();

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

0 голосов
/ 05 апреля 2011

Я думаю, что это ваше желаемое решение: 

<div id="hi" style="height:100px; width:100px;border:1px solid #ddd"></div>

$('*',document.body).click(function(e){
e.stopPropagation();
var dom = $(this).get(0);
if($.trim(dom.id) != 'hi')
    $('#hi').hide();})

спасибо.

0 голосов
/ 05 апреля 2011

Используйте документ, как ваш клик.Мы также используем stopPropagation() на mydiv, поэтому любое нажатие, отличное от mydiv, приведет к его затуханию. 

$('button, .mydiv').click(function(e) {
    e.stopPropagation();
    $('.mydiv').slideDown();
})

$(document).click(function() {
    $('.mydiv').fadeOut();
})

См. Полный пример на http://jsfiddle.net/FWLF3/1/

0 голосов
/ 05 апреля 2011

Вы должны привязать событие click к документу / телу: 

var thediv = $("#thediv.youwant");

// sluit resultaten met document click - niet wanneer op sayt-container wordt geklikt
$(document).click(function(e){
  if(e.target.id != thediv.attr("id") && $(e.target).parents(thediv.selector).length == 0) 
  {
    thediv.hide();
  }
});

Вам нужно настроить $ (e.target) .parents (thediv.selector) .length == 0)немного, это все еще довольно специфично для моего случая.

Этот фрагмент кода проверяет (документ по щелчку), если цель, которая не является элементом div и не является элементом этого элемента div.И скрывает это.

0 голосов
/ 05 апреля 2011

Возможно использовать событие blur в поле ввода для этой задачи?

$('div.search').find('input').blur(function() {
    $('div.search').hide();
    $('a#search').show();
});

$('a#search').click(function() {
   var $a = $(this);
   $a.hide();
   $('div.search').show();
});

Как-то так.

...