Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.10.2013, 13:06
Интересующийся
Отправить личное сообщение для KOPC1886 Посмотреть профиль Найти все сообщения от KOPC1886
 
Регистрация: 02.10.2013
Сообщений: 22

Исчезновение текста(блока) при нажатии на него.
Всем привет!) Изучаю 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>



И так же , если нажать вне границ ссылки, то исчезает еще и первый всплывающий текст( Как всё это исправить?

Последний раз редактировалось KOPC1886, 04.10.2013 в 13:10.
Ответить с цитированием
  #2 (permalink)  
Старый 04.10.2013, 13:13
Интересующийся
Отправить личное сообщение для KOPC1886 Посмотреть профиль Найти все сообщения от KOPC1886
 
Регистрация: 02.10.2013
Сообщений: 22

Так же я только что заметил, что при клике на ссылку (любую одну), то активными становятся и остальные(
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2013, 13:07
Интересующийся
Отправить личное сообщение для mdlv Посмотреть профиль Найти все сообщения от mdlv
 
Регистрация: 14.05.2012
Сообщений: 16

У Вас слишком сложный код для простого эффекта.

С первым текстом тоже не все хорошо

Используйте для разделения нажатий на разные блоки разные id, а не один общий класс .platform-tooltip - из-за этого функция срабатывает одновременно для двух блоков.

Цитата:
И так же , если нажать вне границ ссылки, то исчезает еще и первый всплывающий текст(
Вы обрабатываете не нажатие на ссылку.

$("блок на который кликнули").click(function () {
    $("блок(и) который надо сворачивать-разворачивать").fadeToggle("fast");
});

Последний раз редактировалось mdlv, 08.10.2013 в 13:16.
Ответить с цитированием
  #4 (permalink)  
Старый 08.10.2013, 14:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,838

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>
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 16:08
Присваивание класса при нажатии на ссылку skorpeeon Элементы интерфейса 10 25.07.2013 20:07
Блок должен перемещаться из одной точки в другую, а при повторном нажатии обратно Ser12345678 jQuery 2 17.07.2012 12:18
SyntaxHighlighter подсветка при нажатии faraday Общие вопросы Javascript 3 31.03.2012 23:43
Выбранный текст в select при нажатии на кнопку "добавить" появлялся в select'e Адриан Общие вопросы Javascript 2 31.01.2012 12:38