Исчезновение текста(блока) при нажатии на него.
Всем привет!) Изучаю Jquery) Только начал)
Вот делаю всплывающий текст при нажатии на ссылку, но есть такая проблема. Когда нажимаю на TWO TEXT, высплывающий текст появляется и тут же исчезает( Как это исправить? С первым текстом все хорошо. Вот код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<ul>
<li>
<a class="block-sap-img">
<div class="prev-text">
ONE TEXT
</div>
<span class="platform-tooltip" style="display:none;">
<span class="arrow"></span>
<i></i><b>ONE</b>
<br/>ONE<br/>
</span>
</a>
</li>
</ul>
<ul>
<li>
<a class="block-sap-img">
<div class="prev-text">
TWO TEXT
</div>
<span class="platform-tooltip" style="display:none;">
<span class="arrow"></span>
<i></i><b>TWO</b>
<br/>TWO<br/>
</span>
</a>
</li>
</ul>
<script>
$(".block-sap-img").click(function(e)
{
e.preventDefault();
$(this).children(".platform-tooltip").fadeToggle("fast");
$(this).toggleClass("active");
$(this).children(".platform-tooltip").css("overflow","");
});
// скрытие тултипов попапов
$(document).on("click",function(e){
var $result = $('.block-sap-img');
if($(e.target).parents().index($result.parent()) == -1)
if($result.children(".platform-tooltip").length)
$result.children(".platform-tooltip").fadeOut("fast");
});
$(".platform-tooltip").click(function(e){
e.stopPropagation();
});
</script>
</body>
</html>
И так же , если нажать вне границ ссылки, то исчезает еще и первый всплывающий текст( Как всё это исправить? |
Так же я только что заметил, что при клике на ссылку (любую одну), то активными становятся и остальные(
|
У Вас слишком сложный код для простого эффекта.
С первым текстом тоже не все хорошо :) Используйте для разделения нажатий на разные блоки разные id, а не один общий класс .platform-tooltip - из-за этого функция срабатывает одновременно для двух блоков. Цитата:
$("блок на который кликнули").click(function () {
$("блок(и) который надо сворачивать-разворачивать").fadeToggle("fast");
});
|
KOPC1886,
добавьте отмену всплытия в 41 строку тоже самое в начало что в 57.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<ul>
<li>
<a class="block-sap-img">
<div class="prev-text">
ONE TEXT
</div>
<span class="platform-tooltip" style="display:none;">
<span class="arrow"></span>
<i></i><b>ONE</b>
<br/>ONE<br/>
</span>
</a>
</li>
</ul>
<ul>
<li>
<a class="block-sap-img">
<div class="prev-text">
TWO TEXT
</div>
<span class="platform-tooltip" style="display:none;">
<span class="arrow"></span>
<i></i><b>TWO</b>
<br/>TWO<br/>
</span>
</a>
</li>
</ul>
<script>
$(".block-sap-img").click(function(e)
{ e.stopPropagation();
e.preventDefault();
$(this).toggleClass("active")
.children(".platform-tooltip")
.fadeToggle("fast")
.css("overflow","");
});
// скрытие тултипов попапов
$(document).on("click",function(e){
$('.block-sap-img .platform-tooltip').fadeOut("fast");;
});
$(".platform-tooltip").click(function(e){
e.stopPropagation();
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 10:25. |