Спойлер из двух независимых дивов?
Здравствуйте! Подскажите пожалуйста, как из двух независимых дивов организовать спойлер? Чтобы второй див, размещённый под первым, появлялся при наведении курсора на первый, и оставался видимым при переходе курсора с первого дива на второй, расположенный ниже. Второй див должен исчезнуть без клика, когда курсор будет находится вне первого и второго дива.
Если я правильно понял, необходимо обработать два события - mouseenter() и mouseleave(). С первым вроде бы понятно, но со вторым сложности. Дело в том что у меня дивы разнесены в html коде и не имеют общего родительского div-wrapper. Я только с помощью сss сблизил их, сделав смежными, один под другим. Пересмотрел кучу "открывашек" форума, но не нашёл похожего примера. Благодарю за возможные ответы и помощь! |
|
<!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, Большое спасибо за помощь! Так как я плохо знаю 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>
|
Цитата:
Хотя есть и третий вариант, фиксацию ухода с любого из двух дивов делать с задержкой в одну-две секунды, т.е пока таймер не сработал после ухода, второй див не закрываем, а при наведении в течении этого времени задержки на любой из дивов, таймер сбрасываем и вновь фиксируем наведение... При лёгком наезде блоков друг на друга(можно даж прозрачным бордером) желаемое можно реализовать и с помощью css |
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>
|
Да! Так! Спасибо Рони за чудесный код. Применил его для вывода выпадающего виджета в красной кнопке корзины в меню http://xarod.tk/shop/
|
rikitiki,
:victory: |
| Часовой пояс GMT +3, время: 16:09. |