Открытие блока по клику с закрытием всех остальных. Повторный клик по блоку — закрытие этого блока [дубликат]

217
14 марта 2018, 08:02

На данный вопрос уже ответили:

  • Как выбрать элемент? 3 ответа

FAQ из 13 вопросов, все ответы скрыты. При клике на вопрос должен открываться ответ на него, а все остальные ответы (если есть открытые) должны закрыться. Повторный клик по вопросу (открытому то есть) должен закрыть этот ответ. Замучился... Никак не получается сделать закрытие по повторному клику. В итоге, пока оставил так (всегда остаётся 1 открытый вопрос). Помогите, разобраться, я новичок. Желательно, чтобы было универсально, так как кол-во вопросов периодически меняется, что-то удаляется из середины списка, а что-то добавляется.

ul { 
	list-style-type: none; 
	margin-bottom: 20px; 
	font-size: 14pt !important; 
	text-align: justify; 
	}	 
.question { 
	padding: 5px 0; 
	} 
.question span { 
	border-bottom: 1px dashed #537098; 
	padding: 0 1px; 
	cursor: pointer; 
	color: #537098; 
	} 
#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13 { 
	display: none; 
	margin-left: 20px; 
	padding: 10px 0 5px 10px; 
	} 
li p { 
	padding: 5px; 
	font-size: 14pt !important; 
	}	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<ul> 
	 
	<li class="question" onclick="$('#answer1').slideDown(); $('#answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13').slideUp();"><span>Вопрос 1</span></li> 
	<li id="answer1">Ответ 1</li> 
	 
	<li class="question" onclick="$('#answer2').slideDown(); $('#answer1, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13').slideUp();"><span>Вопрос 2</span></li> 
	<li id="answer2">Ответ 2</li> 
	 
	<li class="question" onclick="$('#answer3').slideDown(); $('#answer1, #answer2, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13').slideUp();"><span>Вопрос 3</span></li> 
	<li id="answer3">Ответ 3</li> 
	 
	<li class="question" onclick="$('#answer4').slideDown(); $('#answer1, #answer2, #answer3, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13').slideUp();"><span>Вопрос 4</span></li> 
	<li id="answer4">Ответ 4</li> 
		 
	</ul>

Answer 1

У вас есть одна большая сущность - Вопрос. Вопрос может иметь ответ, а может и не иметь. Начните с того, что используйте для одной сущности, один элемент списка. Не надо разделать вопрос и ответ в разные li. Элементы списка обычно представляют однородные элементы, у вас то вопрос то ответ, логика ломается, смысла это не имеет, код и верстка усложняются.

Пусть ответ будет вложенным в li, как и span с вопросом

Далее, класс .question вы сделали, почему бы не сделать класс .answer ? зачем эти #answer1. Вы в css написали одно правило для кучу этих #answerХ , должно быть очевидным, что надо сделать класс?

Не вставляйте js код прям внутрь html. забудьте про onclick-атрибуты, так писали лет 15 назад.

$(".question span").click(function(){ 
   var $a = $(this).next(".answer"); 
   $(".answer").not($a).slideUp(); 
   $a.slideToggle(); 
});
ul { 
	list-style-type: none; 
	margin-bottom: 20px; 
	font-size: 14pt !important; 
	text-align: justify; 
	}	 
.question { 
	padding: 5px 0; 
	} 
.question span { 
	border-bottom: 1px dashed #537098; 
	padding: 0 1px; 
	cursor: pointer; 
	color: #537098; 
	} 
.answer { 
	display: none; 
	margin-left: 20px; 
	padding: 10px 0 5px 10px; 
	} 
li p { 
	padding: 5px; 
	font-size: 14pt !important; 
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<ul> 
  <li class="question"> 
     <span>Вопрос 1</span> 
    <div class="answer">Ответ 1</div> 
  </li>	 
  <li class="question"> 
    <span>Вопрос 2</span> 
    <div class="answer">Ответ 2</div> 
  </li> 
	 
  <li class="question"> 
    <span>Вопрос 3</span> 
    <div class="answer">Ответ 3</div> 
  </li> 
	 
  <li class="question" > 
    <span>Вопрос 4</span> 
    <div class="answer">Ответ 4</div> 
  </li> 
   
</ul>

Answer 2

$(".questions-block").on('click', ".question", function (e) { 
  var $this = $(this) 
   
  if ($this.hasClass('open')) { 
    $this.removeClass('open').next().slideUp() 
  } else { 
    $this.closest(".questions-block").find(".question.open").next().slideUp() 
    $this.addClass('open').next().slideDown() 
  } 
})
ul { 
  list-style-type: none; 
  margin-bottom: 20px; 
  font-size: 14pt; 
  text-align: justify; 
} 
 
.question { 
  padding: 5px 0; 
} 
 
.question span { 
  border-bottom: 1px dashed #537098; 
  padding: 0 1px; 
  cursor: pointer; 
  color: #537098; 
} 
 
.answer { 
  display: none; 
  margin-left: 20px; 
  padding: 10px 0 5px 10px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="questions-block"> 
  <li class="question"><span>Вопрос 1</span></li> 
  <li id="answer1" class="answer">Ответ 1</li> 
 
  <li class="question"><span>Вопрос 2</span></li> 
  <li id="answer2" class="answer">Ответ 2</li> 
 
  <li class="question"><span>Вопрос 3</span></li> 
  <li id="answer3" class="answer">Ответ 3</li> 
 
  <li class="question"><span>Вопрос 4</span></li> 
  <li id="answer4" class="answer">Ответ 4</li> 
</ul>

Answer 3

Если делать по вашей HTML разметке, то вот так:

ul { 
	list-style-type: none; 
	margin-bottom: 20px; 
	font-size: 14pt !important; 
	text-align: justify; 
	}	 
.question { 
	padding: 5px 0; 
	} 
.question span { 
	border-bottom: 1px dashed #537098; 
	padding: 0 1px; 
	cursor: pointer; 
	color: #537098; 
	} 
#answer1, #answer2, #answer3, #answer4, #answer5, #answer6, #answer7, #answer8, #answer9, #answer10, #answer11, #answer12, #answer13 { 
	display: none; 
	margin-left: 20px; 
	padding: 10px 0 5px 10px; 
	} 
li p { 
	padding: 5px; 
	font-size: 14pt !important; 
	}	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul> 
 
<li class="question"><span>Вопрос 1</span></li> 
<li id="answer1">Ответ 1</li> 
 
<li class="question"><span>Вопрос 2</span></li> 
<li id="answer2">Ответ 2</li> 
 
<li class="question"><span>Вопрос 3</span></li> 
<li id="answer3">Ответ 3</li> 
 
<li class="question"><span>Вопрос 4</span></li> 
<li id="answer4">Ответ 4</li> 
	 
</ul> 
 
<script> 
  $('.question').each(function() { 
    $(this).on('click', function() { 
      $('.question').not($(this)).next().slideUp(); 
      $(this).next().slideToggle(); //чтобы можно было скрыть при повторном нажатии 
    }); 
  }); 
</script>

READ ALSO
Помогите с nodejs модуль request timeout
javascript

Помогите с nodejs модуль request timeout

У меня недавно появилась проблема, сайт некоторые элементы стал загружать после того как уже загрузилась страницаНапример, я захожу на яндекс...

 233
Angular 2 - Ожидание выполнения CanActivate
javascript

Angular 2 - Ожидание выполнения CanActivate

Вопрос - есть определенные роуты, определенные с помощью стандартного метода роутинга AngularВ CanActivate я указываю свой guard

 254
Buy one click WooCommerce ошибка при отправлении заказа
javascript

Buy one click WooCommerce ошибка при отправлении заказа

на сайте smartbalanceonline при отправке заказа

 294
Русские символы в JSON?
javascript

Русские символы в JSON?

Из сервиса приходит json код с русскими именами ключейМожно ли их использовать в javascript или нужно обязательно преобразовывать и создавать соответствия...

 233