Переключение между скрытием и показом и скрытием div при помощи мыши

Question

Переключение между скрытием и показом и скрытием div при помощи мыши

0

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

То, что я сделал, показано ниже:

$(document).ready(function() {
    $("#poplink").click(function() {
        $('#popup').toggle();
    });
    $(document).mouseup(function(e) {
        var container = $("#popup");
        if (!container.is(e.target) && container.has(e.target).length === 0) { // if the target of the click isn't the container...
            // ... nor a descendant of the container
            container.hide();
        }
    });
});

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

Может ли кто-нибудь помочь мне решить эту проблему. FIDDLE

Jenz 04 янв. 2014, в 07:52

Источник

0

Возможно, вы захотите увидеть этот jqueryui.com/dialog/#modal-form
ariel 04 янв. 2014, в 06:07
0

$('#regpopup').hide(); кажется, не используется, так что избыточно
deW1 04 янв. 2014, в 06:15
0

@dan Я думаю, что ОП просто не скопировал код для #regpopup .
Lucas - Better Coding Academy 04 янв. 2014, в 06:17
0

У меня есть другой div regpopup с тем же свойством. Поэтому я не скопировал код для него. Извините за ошибку.
Jenz 04 янв. 2014, в 06:18

Показать ещё 2 комментария

Теги:

jquery

html

toggle

2 ответа

3

Хм, я вижу, где вы скопировали этот бит. Изменил его для вас, так что теперь он работает:

$(document).ready(function()
{
  $("#poplink").click(function(e)
  {
    e.stopPropagation();
    $('#popup').toggle();
    $('#regpopup').hide();
  });
  $("*:not(#poplink)").click(function (e) {
    var container = $("#popup");
    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
      container.hide();
    }
  });
});

И JSFiddle: http://jsfiddle.net/f9Ywh/8/

think123 04 янв. 2014, в 03:41

0

Я хочу переключаться между скрытием / показом div при нажатии на ссылку. Это то, что я не получаю.
Jenz 04 янв. 2014, в 06:09
0

@Jenz извините за это, это сработало 2 секунды назад.
Lucas - Better Coding Academy 04 янв. 2014, в 06:09
0

@Jenz Теперь это работает.
Lucas - Better Coding Academy 04 янв. 2014, в 06:11
0

хм, полезно. классно!
user1251600 04 янв. 2014, в 06:15

Показать ещё 2 комментария

Ещё вопросы

Возможно, вы захотите увидеть этот jqueryui.com/dialog/#modal-form
$('#regpopup').hide(); кажется, не используется, так что избыточно
@dan Я думаю, что ОП просто не скопировал код для #regpopup .
У меня есть другой div regpopup с тем же свойством. Поэтому я не скопировал код для него. Извините за ошибку.
Я хочу переключаться между скрытием / показом div при нажатии на ссылку. Это то, что я не получаю.
@Jenz извините за это, это сработало 2 секунды назад.

Arun P Johny · Accepted Answer · 2014-01-04T03-29-00.000Z

Зарегистрируйте обработчик клика для документа, а не mouseup

$(document).ready(function () {
    $("#poplink").click(function (e) {
        e.stopPropagation();
        $('#popup').toggle();
        $('#regpopup').hide();
    });

    $(document).click(function (e) {
        var container = $("#popup");
        if (!container.is(e.target) // if the target of the click isn't the container...
        &&
        container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.hide();
        }
    });

});

Демо: скрипка

Большое спасибо за идею. Я надеюсь, что поведение одинаково во всех браузерах.