Всем привет!) Изучаю 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>
И так же , если нажать вне границ ссылки, то исчезает еще и первый всплывающий текст( Как всё это исправить?