Javascript.RU

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

аккордеон при клике на содержимом закрывается
подскажите пожалуйста, сделал аккордеон , все открывается но, при клике на содержимом аккордеона он сворачивается, а нужно чтоб сворачивался только при клике по шапке
<div class="VacancyAccordion " >
													<div class="VacancyAccordion-container">
														
														<div class="VacancyAccordion-wrapper">
															<h3>Самара</h3>
															<div class="VacancyAccordion-open">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
															</div>
														</div>
													</div>
													<div class="VacancyAccordion-content">
														<div class="VacancyAccordion-document">
															<h3 class="VacancyAccordion-document">
																<span>
																	Вакансия1
																</span>
															</h3>
														</div>
														<div class="VacancyAccordion-document">
															<h3 class="VacancyAccordion-document">
																<span>
																	Вакансия2
																</span>
															</h3>
														</div>
													</div>
												</div>

$(document).ready(function(){
	

	$('.VacancyAccordion').click(function(){
		$(this).toggleClass('VacancyAccordion-open').next().slideToggle();
	});
	


});

Код:
.vacancy-title {
  text-align: center; }
  .vacancy-title h2 {
    font-family: "Roboto", normal;
    font-size: 40px; }

.VacancyAccordion {
  max-height: 82px;
  overflow: hidden; }
  .VacancyAccordion-open {
    overflow: visible;
    max-height: 368px; }
  .VacancyAccordion-content {
    max-width: 960;
    margin: 0 auto;
    padding: 30px 100px 78px; }
  .VacancyAccordion-document {
    height: auto;
    border-radius: 8px;
    display: flex;
    box-align: center;
    align-items: center;
    padding: 10px 0;
    text-decoration: none; }
    .VacancyAccordion-document:hover {
      transition: color 0.4s ease;
      color: #ff4114; }
    .VacancyAccordion-document h3 {
      font-family: "Roboto", regular;
      font-size: 17px;
      letter-spacing: 0;
      line-height: 40px;
      cursor: pointer; }
  .VacancyAccordion-container {
    max-width: 960px;
    border-top: 1px solid #e2e6e8;
    margin: 0 auto;
    height: 80px;
    cursor: pointer; }
    .VacancyAccordion-container:hover {
      transition: color 0.4s ease;
      color: #ff4114; }
  .VacancyAccordion-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    box-pack: justify;
    justify-content: space-between;
    box-align: center; }
    .VacancyAccordion-wrapper h3 {
      font-family: "Roboto", regular;
      font-size: 21px;
      letter-spacing: 0; }
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2019, 14:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

playful2017,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .vacancy-title {
  text-align: center; }
  .vacancy-title h2 {
    font-family: "Roboto", normal;
    font-size: 40px; }

.VacancyAccordion {
  max-height: 82px;
  overflow: hidden; }
  .VacancyAccordion-open {
    overflow: visible;
    max-height: 368px; }
  .VacancyAccordion-content {
    max-width: 960;
    margin: 0 auto;
    padding: 30px 100px 78px; }
  .VacancyAccordion-document {
    height: auto;
    border-radius: 8px;
    display: flex;
    box-align: center;
    align-items: center;
    padding: 10px 0;
    text-decoration: none; }
    .VacancyAccordion-document:hover {
      transition: color 0.4s ease;
      color: #ff4114; }
    .VacancyAccordion-document h3 {
      font-family: "Roboto", regular;
      font-size: 17px;
      letter-spacing: 0;
      line-height: 40px;
      cursor: pointer; }
  .VacancyAccordion-container {
    max-width: 960px;
    border-top: 1px solid #e2e6e8;
    margin: 0 auto;
    height: 80px;
    cursor: pointer; }
    .VacancyAccordion-container:hover {
      transition: color 0.4s ease;
      color: #ff4114; }
  .VacancyAccordion-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    box-pack: justify;
    justify-content: space-between;
    box-align: center; }
    .VacancyAccordion-wrapper h3 {
      font-family: "Roboto", regular;
      font-size: 21px;
      letter-spacing: 0; }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
   $('.VacancyAccordion').on('click', '.VacancyAccordion-container', function(event){
		$(event.delegateTarget).toggleClass('VacancyAccordion-open')
	});
});
  </script>
</head>

<body>
<div class="VacancyAccordion" >
													<div class="VacancyAccordion-container">

														<div class="VacancyAccordion-wrapper">
															<h3>Самара</h3>
															<div class="VacancyAccordion-open">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
															</div>
														</div>
													</div>
													<div class="VacancyAccordion-content">
														<div class="VacancyAccordion-document">
															<h3 class="VacancyAccordion-document">
																<span>
																	Вакансия1
																</span>
															</h3>
														</div>
														<div class="VacancyAccordion-document">
															<h3 class="VacancyAccordion-document">
																<span>
																	Вакансия2
																</span>
															</h3>
														</div>
													</div>
												</div>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2019, 14:58
Новичок на форуме
Отправить личное сообщение для playful2017 Посмотреть профиль Найти все сообщения от playful2017
 
Регистрация: 18.10.2019
Сообщений: 3

Сообщение от рони Посмотреть сообщение
playful2017,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .vacancy-title {
  text-align: center; }
  .vacancy-title h2 {
    font-family: "Roboto", normal;
    font-size: 40px; }

.VacancyAccordion {
  max-height: 82px;
  overflow: hidden; }
  .VacancyAccordion-open {
    overflow: visible;
    max-height: 368px; }
  .VacancyAccordion-content {
    max-width: 960;
    margin: 0 auto;
    padding: 30px 100px 78px; }
  .VacancyAccordion-document {
    height: auto;
    border-radius: 8px;
    display: flex;
    box-align: center;
    align-items: center;
    padding: 10px 0;
    text-decoration: none; }
    .VacancyAccordion-document:hover {
      transition: color 0.4s ease;
      color: #ff4114; }
    .VacancyAccordion-document h3 {
      font-family: "Roboto", regular;
      font-size: 17px;
      letter-spacing: 0;
      line-height: 40px;
      cursor: pointer; }
  .VacancyAccordion-container {
    max-width: 960px;
    border-top: 1px solid #e2e6e8;
    margin: 0 auto;
    height: 80px;
    cursor: pointer; }
    .VacancyAccordion-container:hover {
      transition: color 0.4s ease;
      color: #ff4114; }
  .VacancyAccordion-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    box-pack: justify;
    justify-content: space-between;
    box-align: center; }
    .VacancyAccordion-wrapper h3 {
      font-family: "Roboto", regular;
      font-size: 21px;
      letter-spacing: 0; }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
   $('.VacancyAccordion').on('click', '.VacancyAccordion-container', function(event){
		$(event.delegateTarget).toggleClass('VacancyAccordion-open')
	});
});
  </script>
</head>

<body>
<div class="VacancyAccordion" >
													<div class="VacancyAccordion-container">

														<div class="VacancyAccordion-wrapper">
															<h3>Самара</h3>
															<div class="VacancyAccordion-open">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
															</div>
														</div>
													</div>
													<div class="VacancyAccordion-content">
														<div class="VacancyAccordion-document">
															<h3 class="VacancyAccordion-document">
																<span>
																	Вакансия1
																</span>
															</h3>
														</div>
														<div class="VacancyAccordion-document">
															<h3 class="VacancyAccordion-document">
																<span>
																	Вакансия2
																</span>
															</h3>
														</div>
													</div>
												</div>

</body>
</html>
насколько понял поменяли только
$(function() {
	$('.VacancyAccordion').on('click', '.VacancyAccordion-container', function(event){
	$(event.delegateTarget).toggleClass('VacancyAccordion-open')

});

});

все осталось по прежнему
Ответить с цитированием
  #4 (permalink)  
Старый 18.10.2019, 15:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

playful2017,
Ответить с цитированием
  #5 (permalink)  
Старый 18.10.2019, 15:34
Новичок на форуме
Отправить личное сообщение для playful2017 Посмотреть профиль Найти все сообщения от playful2017
 
Регистрация: 18.10.2019
Сообщений: 3

Сообщение от рони Посмотреть сообщение
playful2017,
извиняюсь, куча копий насоздавал, пока делал, все работает!! Благодарю!
Ответить с цитированием
  #6 (permalink)  
Старый 18.10.2019, 15:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

playful2017,
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Закрыть DIV при клике в нем на ссылку или баннер xavibeat Общие вопросы Javascript 1 30.03.2016 20:41
При клике появлялся новый элемент (бесконечно) Eadweard Элементы интерфейса 3 16.02.2016 08:13
При клике на кнопку переход к якорю и открытие блока Galyanov Элементы интерфейса 19 11.12.2015 21:12
Изменение размера элемента при клике Derekovich Элементы интерфейса 25 05.12.2013 20:45