Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.07.2014, 21:36
Новичок на форуме
Отправить личное сообщение для updaite Посмотреть профиль Найти все сообщения от updaite
 
Регистрация: 26.07.2014
Сообщений: 3

Показать div при наведении / jQuery
Здравствуйте, только начинаю осваивать jQuery.
Есть ссылка
<a id="new-ref" href="#">текст</a>
, есть поле
<div id="div-test">
 при наведении, всплывает div
</div>


Нужно при наведении на ссылку отобразить поле div, (поле div находится прямо под ссылкой поэтому можно сразу перенести курсор в поле).
1) Условия закрытия div: если курсор НЕ находиться над ссылкой и он не в поле div закрыть div.
2) Дополнение к первому условию: На поле div есть поля ввода текста, если поля пустые следовать первому условию, если нет, то закрывать только по клику в не элементов div и ссылки.

Подскажите пожалуйста как такую задумку реализовать?
Ответить с цитированием
  #2 (permalink)  
Старый 27.07.2014, 02:08
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

updaite,
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<style>
div.wrap{width:50px;}
div.wrap div{display:none;width:400px;border:1px solid #000;padding:20px;}
</style>

<div class="wrap">
	<a href="#">Ссылка</a>
	<div><input type="text"><input type="text"><input type="button" value="Go"></div>
</div>
<br>
<div class="wrap">
	<a href="#">Ссылка</a>
	<div><input type="text"><input type="text"><input type="button" value="Go"></div>
</div>

<script>
$(function(){
	$(document).click(function(e){
		if ($(e.target).closest('div.wrap').length) return;
		$('div.wrap div').hide();
		e.stopPropagation();
	});
	$('div.wrap a').mouseenter(function(){
		$(this).next().show();
	});
	$('div.wrap').mouseleave(function(){
		var x = 1;
		$('input:text',this).each(function(){
			if (this.value) return x = 0;
		});
		if (x) $('div',this).hide();
	});
});
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 27.07.2014, 12:35
Новичок на форуме
Отправить личное сообщение для updaite Посмотреть профиль Найти все сообщения от updaite
 
Регистрация: 26.07.2014
Сообщений: 3

А как сделать что бы тоже самые работала при условии что элементы расположены именно вот так.
И проверка полей на пустоту осуществлялась именно в блоке
<div id="show-div">

<a id="ssilka" href="#">Ссылка</a>
<div id="show-div">
    <input type="text">
    <input type="text">
    <input type="button" value="Go">
</div>


И прокомментируйте пожалуйста скрипт, чтобы я понимал как он работает на будоющие, а то некоторые моменты мне не совсем понятны, спасибо.

Последний раз редактировалось updaite, 27.07.2014 в 12:37.
Ответить с цитированием
  #4 (permalink)  
Старый 27.07.2014, 18:06
Новичок на форуме
Отправить личное сообщение для updaite Посмотреть профиль Найти все сообщения от updaite
 
Регистрация: 26.07.2014
Сообщений: 3

Реализовал вот так.

<a id="new-ref" href="#">текст</a>
<div id="div-test">
 <input id="login" type="text">
 <input id="password" type="text">
</div>


Код:
#div-test{
display:none;
width:400px;
border:1px solid #000;
padding:20px;
}
$(function(){
    $('#new-ref').mouseenter(function(){ // Навели на ссылку?
      $( "#div-test" ).show(); // Показываем блок
    });

    $("#new-ref").mouseleave(function(event ){ // курсор ушел с ссылки?
        event = event || window.event   // Не знаю что тут происходит
        var relTarg = event.relatedTarget || event.toElement   // Определяем куда курсор ушел
        if (relTarg.id != 'div-test')  
        {
            if ($("input[id='login']").val().length != 0) return; // есть текст в input? -> return
            $( "#div-test" ).hide();  // Скрываем блок
        }
     });
    
   $("#div-test").mouseleave(function(event ){  // курсор ушел с блока?
        event = event || window.event  // Не знаю что тут происходит
        var relTarg = event.relatedTarget || event.toElement // Определяем куда курсор ушел
        if (relTarg.id != 'new-ref')
          {
             if ($("input[id='login']").val().length != 0) return; // есть текст в input? -> return
             $( "#div-test" ).hide();  // Скрываем блок
          }
   });
   
    $(document).click(function(e){ // Функция скрывает элемент если произошёл клик в не поля #div-test
            if ($(e.target).closest('#div-test').length) return;  // Не знаю что тут происходит
            $('#div-test').hide(); // Скрываем блок
            e.stopPropagation(); // Не знаю что тут происходит
        });
    
});


Насколько это правильно?

Последний раз редактировалось updaite, 27.07.2014 в 22:07.
Ответить с цитированием
  #5 (permalink)  
Старый 28.07.2014, 03:45
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

updaite, строки 6 - 24 заменить на:
$('#new-ref,#div-test').mouseleave(function(e){
    if (e.relatedTarget.id == 'new-ref' || e.relatedTarget.id == 'div-test') return;
    if ($('#login').val() || $('#password').val()) return;
    $('#div-test').hide();
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена div блока при наведении курсора мыши Денис2201 Общие вопросы Javascript 3 07.10.2013 13:43
Картинка меняется при наведении на случайную f1nik Элементы интерфейса 0 26.06.2013 13:46
При наведении на ссылку меняется картинка ucoz (jquery) pelimeshki jQuery 2 13.01.2012 01:53
Смена фона при наведении Crystal Элементы интерфейса 3 13.10.2011 12:23
Картинка не изменяется при наведении. astashovaj Общие вопросы Javascript 11 12.01.2011 10:44