Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2015, 00:01
Новичок на форуме
Отправить личное сообщение для tutzya Посмотреть профиль Найти все сообщения от tutzya
 
Регистрация: 13.07.2015
Сообщений: 6

Выпадающий текст на jquery
Приветствую. Нашел в интернете скрипт на jquery по выпадающим элементам. Прорабатываю его. У меня вопрос:
Если раскликнуть "My Question 1", то его цвет становится оранжевым, если кликнуть на "My Question 2", то цвет первого снова станет черным. Однако, как сделать, чтобы при повторным клике на "My Question 1" цвет менялся на исходный черный? (Сейчас если открыть и потом закрыть "My Question 1", то его цвет сначала поменяется на оранжевый, однако потом не меняется обратно на черный)
Ссылка на код: http://jsfiddle.net/2qztagno/2/
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2015, 00:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,533

tutzya,
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

  <style type='text/css'>
    .view-source {
  margin-bottom: 10px;
}

.hide {
  border: 1px solid #eee;
  border-top: none;
  font-size: 16px;
  padding: 10px;
  display: block;
}

.view-source a:link, .view-source a:visited {
  background: #F3F2EE;
  box-shadow: 1px 1px #ccc;
  border: 5px;
  border: none;
  clear: both;
  color: #000;
  display: block;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  padding-left: 10px;
  border: 1px solid #eee;
}

.view-source a:hover ,.view-source a.test{
  background: #eee;
    color: #ffad81;
}

  </style>



<script type='text/javascript'>
$(window).load(function(){
$('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).removeClass('test').next().slideUp(800);
      $(this).toggleClass('test').next().slideToggle(800);
 });
});

</script>


</head>
<body>
  <div class="view-source">
              <a href="#">My Question 1?</a>
              <div class="hide" style="display: none;">My Answer</div>
            </div>
<div class="view-source">
              <a href="#">My Question 2?</a>
              <div class="hide" style="display: none;">My Answer</div>
            </div>

</body>


</html>
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2015, 00:22
Аватар для jasper-blondin
Аспирант
Отправить личное сообщение для jasper-blondin Посмотреть профиль Найти все сообщения от jasper-blondin
 
Регистрация: 11.07.2015
Сообщений: 33

В вашем случае так:

$(".view-source .hide").hide();
$a = $(".view-source a");
$a.on("click", function(event) {
	event.preventDefault();

	$a.not(this).next().slideUp(800);
	$(this).next().slideToggle(800);

	if($(this).hasClass("active")) {
		$(this).removeClass("active").css("color", "#000");
	}
	else {
		$(this).addClass("active").css("color", "#ffad81");
	}

	$a.not(this).removeClass("active").css("color", "#000");
});


Хотя не рекомендую задавать свойства напрямую через метод .css(). Лучше создать CSS-класс и присваивать его. Так код станет более гибким.
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2015, 00:25
Аватар для jasper-blondin
Аспирант
Отправить личное сообщение для jasper-blondin Посмотреть профиль Найти все сообщения от jasper-blondin
 
Регистрация: 11.07.2015
Сообщений: 33

Сообщение от рони Посмотреть сообщение
$(this).toggleClass('test').next().slideToggle(800);
Я, как обычно, немного "покатался на велосипеде" ))
Ответить с цитированием
  #5 (permalink)  
Старый 13.07.2015, 09:29
Новичок на форуме
Отправить личное сообщение для tutzya Посмотреть профиль Найти все сообщения от tutzya
 
Регистрация: 13.07.2015
Сообщений: 6

jasper-blondin,
рони,
большое вам спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 13.07.2015, 12:43
Новичок на форуме
Отправить личное сообщение для tutzya Посмотреть профиль Найти все сообщения от tutzya
 
Регистрация: 13.07.2015
Сообщений: 6

рони, подскажите пожалуйста, как поступать, если хочется также добавить и шрифтовые иконки, которые будут являться child'ом <a>?
Код: http://jsfiddle.net/2qztagno/28/
Ответить с цитированием
  #7 (permalink)  
Старый 13.07.2015, 14:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,533

tutzya,
ненадо трогать скрипт можно просто добавить
добавить в css
.test .fa-plus:before{
  content:"\f068";
}

http://jsfiddle.net/2qztagno/31/
Ответить с цитированием
  #8 (permalink)  
Старый 13.07.2015, 16:28
Новичок на форуме
Отправить личное сообщение для tutzya Посмотреть профиль Найти все сообщения от tutzya
 
Регистрация: 13.07.2015
Сообщений: 6

Благодарю!
Ответить с цитированием
  #9 (permalink)  
Старый 11.01.2019, 15:20
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 65

Подскажите, можно ли реализовать на яваскрипт что то типа сервиса просмотр html-кода онлайн, поле ввода для адреса и кнопка submit, после нажатия появляется поле textarea с кодом, что то типа как вводишь в адресной строке перед адресом view-source:
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамически сменяющий друг друга текст eugene111 Events/DOM/Window 5 03.01.2016 02:33
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 16:34
Вызов модальных окон из списка Jekins Элементы интерфейса 2 14.03.2013 23:57
Прокрутка; Изменение координат картинки (Sandr) Общие вопросы Javascript 12 31.12.2011 03:34