Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выпадающий текст на jquery (https://javascript.ru/forum/jquery/56969-vypadayushhijj-tekst-na-jquery.html)

tutzya 12.07.2015 23:01

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

рони 12.07.2015 23:18

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>

jasper-blondin 12.07.2015 23:22

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

$(".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-класс и присваивать его. Так код станет более гибким.

jasper-blondin 12.07.2015 23:25

Цитата:

Сообщение от рони (Сообщение 378964)
$(this).toggleClass('test').next().slideToggle(800);

Я, как обычно, немного "покатался на велосипеде" ))

tutzya 13.07.2015 08:29

jasper-blondin,
рони,
большое вам спасибо!

tutzya 13.07.2015 11:43

рони, подскажите пожалуйста, как поступать, если хочется также добавить и шрифтовые иконки, которые будут являться child'ом <a>?
Код: http://jsfiddle.net/2qztagno/28/

рони 13.07.2015 13:05

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

http://jsfiddle.net/2qztagno/31/

tutzya 13.07.2015 15:28

Благодарю!

m~r.Nemo 11.01.2019 14:20

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


Часовой пояс GMT +3, время: 22:40.