Как указать .stopPropagation () в этом примере? - PullRequest
Новая
       27

Как указать .stopPropagation () в этом примере?

0 голосов
/ 14 декабря 2011

Я использовал следующий код, чтобы «щелкнуть снаружи», чтобы закрыть работу:

При нажатии на показ Div: 

$('div.topIconNew').click(
    function(){
        $(this).siblings('div.topTip').show();
        $(this).siblings('div.topDrop').slideDown(240);

При щелчке за пределами окна div: 

$('div#wrapper').click(
    function(event){
        $('div.topIconNew, div.topTip, div.topDrop').hide();
    }
);
$('div.topTip, div.topDrop').click(
    function(event){
        event.stopPropagation();
    }
);

Проблема с этим выше заключается в том, что topIconNew .stopPropagation делает так, чтобы после открытия div-элементов topTip и topDrop они не закрывались, если я снова нажму на тот же topIconNew (т. Е. Переключатель) или другой экземпляр topIconNew.

НОВОЕ РЕДАКТИРОВАНИЕ ***

Хорошо, я обдумываю это и задаюсь вопросом, может ли быть решение с помощью операторов if.

Итак, в конечном итоге мне нужен следующий дополнительный код: 

$('topIconNew').click(
    function(){
        $('div.topTip, div.topDrop').hide();
    }
);

Тем не менее, я хочу, чтобы вышеприведенное также говорило, что нужно скрывать topTip и topDrop при нажатии только topIconNew , если открыты topTip и topDrop AND скрывают только элементы topTip и topDiv, которые в настоящее время открыт.

Как бы я сказал выше?

1 Ответ

1 голос
/ 14 декабря 2011

Это не отвечает на ваш вопрос напрямую, но я только что видел, как кто-то на SO реализовал метод «щелкни где угодно, чтобы закрыть всплывающее окно» довольно элегантным способом;предостережение в том, что остальная часть вашей страницы должна использовать e.stopPropagation() экономно. 

$('div.topIconNew').click(function(e){
    $(this).siblings('div.topTip').show();
    $(this).siblings('div.topDrop').slideDown(240); 

    $(document).one('click', function() {
        $('div.topTip, div.topDrop').hide();
    });

    e.stopPropagation();        

    ...
});
...