Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2016, 23:37
Аватар для rikitiki
Интересующийся
Отправить личное сообщение для rikitiki Посмотреть профиль Найти все сообщения от rikitiki
 
Регистрация: 10.05.2013
Сообщений: 20

Спойлер из двух независимых дивов?
Здравствуйте! Подскажите пожалуйста, как из двух независимых дивов организовать спойлер? Чтобы второй див, размещённый под первым, появлялся при наведении курсора на первый, и оставался видимым при переходе курсора с первого дива на второй, расположенный ниже. Второй див должен исчезнуть без клика, когда курсор будет находится вне первого и второго дива.
Если я правильно понял, необходимо обработать два события - mouseenter() и mouseleave().
С первым вроде бы понятно, но со вторым сложности.
Дело в том что у меня дивы разнесены в html коде и не имеют общего родительского div-wrapper. Я только с помощью сss сблизил их, сделав смежными, один под другим.
Пересмотрел кучу "открывашек" форума, но не нашёл похожего примера.
Благодарю за возможные ответы и помощь!

Последний раз редактировалось rikitiki, 12.02.2016 в 23:44.
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2016, 00:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

rikitiki,
меню как на сайте утконос
Разворачивающееся меню
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2016, 03:06
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
  $(document).ready(function(){

    var i = 0;
    $("div[data-toggle]").mouseover(function(){
      var sel = $(this).attr('data-toggle');
       $(sel).fadeIn();
    }).mouseout(function(){
      var sel = $(this).attr('data-toggle');
       $(sel).fadeOut();
    });
 });
</script>

<style>
.hide {display:none;}
div[data-toggle] {
  border:dotted 1px rgba(0,0,0,.5);
}
</style>

<div data-toggle="#id321"><span style="color:blue">Описание</span>(спойлер)</div>
<br>
Какой-то текст <br>
И еще<br>
<br>
<div id="id321" class="hide">
<span style="color:red">А вот Мы и открылись!</span>
</div>

</body>
</html>

Последний раз редактировалось Deff, 13.02.2016 в 03:11.
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2016, 13:46
Аватар для rikitiki
Интересующийся
Отправить личное сообщение для rikitiki Посмотреть профиль Найти все сообщения от rikitiki
 
Регистрация: 10.05.2013
Сообщений: 20

рони,
Deff,
Большое спасибо за помощь!
Так как я плохо знаю js мне сразу трудно оценить примеры предложеные рони, а вот из примера Deff я удалил строки
<br>
Какой-то текст <br>
И еще<br>
<br>

подведя тем самым вплотную нижний независимый div под верхний. Но в этом случае, когда переводишь курсор с верхнего дива на нижний, то последний исчезает.
Чтобы было понятней для чего это необходимо приведу ссылку на свой тестовый сайт:
http://xarod.tk/shop/
Здесь, в строке меню, слева-направо три корзины:
первая - созданная платным плагином WooCommerce WooCart Pro, вторая - созданная бесплатным плагином WooCommerce Menu Cart и третья - штатная, входящая в состав темы Store Front.
Еще справа, кодом в header.php:
<div class="widg">
<?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
</div>

вставлен виджет корзины.
Если ниже раза три нажать под тестовым товаром кнопки "Добавить в корзину", то корзины наполнятся тестовым товаром. Если подвести курсор к первой и третьей корзине то ниже появится виджет корзины.
Во второй бесплатной корзине этого показа нет. Поэтому возникла необходимость связать эту корзину с тем виджетом, что справа в хеадере.
То-есть, с помощью css, переместить виджет под корзину, скрыть, а затем скриптом сделать его появление при наведении.
Вот смотрю через Firebug на первую корзину. образованную WooCommerce WooCart Pro. В html коде его div, со всплывающим виджетом, разнесён от верхнего дива очень далеко. однозначно не вплотную и не связан родительским дивом с верхним, однако чётко работает.
рони, по вашей ссылке меню должным образом не работает:
меню как на сайте утконос

------------------

Немного упростил-переделал код код от Deff:
https://jsfiddle.net/mbg4gqe6/
Теперь второй див появляется при наведении на первый, но исчезает, когда выйдешь из второго. Однако не исчезает, когда выходишь из первого. Как сделать чтобы появлялся от первого, а исчезал при выходе из любого - не знаю.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){
   $(".asd").mouseenter(function(){
      $(".hide").css("display","block");
   });
   $(".hide").mouseleave(function(){
      $(".hide").css("display","none");
   });
});
</script>

<style>
.hide {display:none; width:165px;}
.asd {
  border:dotted 1px rgba(0,0,0,.5); width:140px;
}
</style>
</head>
<div class="asd"><span style="color:blue">Описание</span>(спойлер)</div>
<div id="id321" class="hide">
<span style="color:red">А вот Мы и открылись!</span>
</div>

</body>
</html>

Последний раз редактировалось rikitiki, 13.02.2016 в 20:44.
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2016, 22:50
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от rikitiki
Как сделать чтобы появлялся от первого, а исчезал при выходе из любого - не знаю.
Такая возможность есть либо при пересечении границ обоих блоков, либо второй, делать вложенный в первый и позиционировать его абсолютно в заранее созданный для него некий третий див с подогнанными под второй див размерами, ибо вероятно Вы хотите сохранить открытым блок, при переходе с первого, на второй,
Хотя есть и третий вариант, фиксацию ухода с любого из двух дивов делать с задержкой в одну-две секунды, т.е пока таймер не сработал после ухода, второй див не закрываем, а при наведении в течении этого времени задержки на любой из дивов, таймер сбрасываем и вновь фиксируем наведение...

При лёгком наезде блоков друг на друга(можно даж прозрачным бордером) желаемое можно реализовать и с помощью css

Последний раз редактировалось Deff, 13.02.2016 в 23:02.
Ответить с цитированием
  #6 (permalink)  
Старый 14.02.2016, 01:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

rikitiki,
так?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){
   $(".asd,.hide").mouseenter(function(){
      $(".hide").show();
   });
   $(".asd,.hide").mouseleave(function(){
      $(".hide").delay(300).hide();
   });
});
</script>

<style>
.hide {display:none; width:165px;}
.asd {
  border:dotted 1px rgba(0,0,0,.5); width:140px;
}
</style>
</head>
<body>
<div class="asd"><span style="color:blue">Описание</span>(спойлер)</div>
<div id="id321" class="hide">
<span style="color:red">А вот Мы и открылись!</span>
</div>

</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 14.02.2016, 22:18
Аватар для rikitiki
Интересующийся
Отправить личное сообщение для rikitiki Посмотреть профиль Найти все сообщения от rikitiki
 
Регистрация: 10.05.2013
Сообщений: 20

Да! Так! Спасибо Рони за чудесный код. Применил его для вывода выпадающего виджета в красной кнопке корзины в меню http://xarod.tk/shop/

Последний раз редактировалось rikitiki, 14.02.2016 в 22:24.
Ответить с цитированием
  #8 (permalink)  
Старый 14.02.2016, 22:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

rikitiki,
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Спойлер - сворачивать предыдущий спойлер при открытии нового maxmusicmax Общие вопросы Javascript 6 02.06.2015 22:50
Пересечение и разность двух массивов harold Общие вопросы Javascript 9 18.12.2013 21:41
как сделдать меню из двух калонок как в bestchange.ru Андрей Лебедев Элементы интерфейса 2 21.01.2013 10:32
Функция взаимодействия двух независимых между собой величин dmitry111 Общие вопросы Javascript 5 20.08.2012 10:51
MySQl дата между двух дат mycoding Серверные языки и технологии 8 14.02.2011 15:23