Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 14.02.2019, 12:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,442

Сообщение от denis_kontarev
А можно реализовать с .toggle();
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <style type="text/css">
  tbody.st {
    display : table-row-group;
  }
  </style>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.spoiler').on('click', '.trigger', function(event) {
   $('.st', event.delegateTarget).toggle();
});
});
  </script>
</head>

<body>
<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" style="display: none;"><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" style="display: none;"><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" style="display: none;"><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

</body>
</html>

Последний раз редактировалось рони, 14.02.2019 в 16:00.
Ответить с цитированием
  #12 (permalink)  
Старый 14.02.2019, 15:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,966

рони, а как это может быть при display: table-row-group?
Ответить с цитированием
  #13 (permalink)  
Старый 14.02.2019, 15:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,442

Сообщение от laimas
а как это может быть при display: table-row-group?
строка 7
<style type="text/css">
  tbody.st {
    display : table-row-group;
  }
  </style>
Ответить с цитированием
  #14 (permalink)  
Старый 14.02.2019, 16:02
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,966

А я читаю конец выражения. Да класс переключать можно, у него JQ, значит .toggleClass().
Ответить с цитированием
  #15 (permalink)  
Старый 14.02.2019, 16:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,442

Сообщение от laimas
. Да класс переключать можно
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  tbody.st {
    display :  none;
  }
  tbody.st.show {
    display : table-row-group;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.spoiler').on('click', '.trigger', function(event) {
   $('.st', event.delegateTarget).toggleClass('show');
});
});
  </script>
</head>

<body>
<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" ><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" ><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" ><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

</body>
</html>
Ответить с цитированием
  #16 (permalink)  
Старый 14.02.2019, 17:18
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 542

Сообщение от рони
$(function() {
$('.spoiler').on('click', '.trigger', function(event) {
   $('.st', event.delegateTarget).toggleClass('show');
});
});
Чтобы не вешать обработчик на каждый элемент можно использовать делегирование
$(document).on("click", ".trigger", function() {
	$(".st", this.parentNode).toggleClass("show");
});


Теперь можно свободно добавлять элементы .spoiler, они будут также функционировать!

Последний раз редактировалось Malleys, 14.02.2019 в 17:21.
Ответить с цитированием
  #17 (permalink)  
Старый 14.02.2019, 17:50
Интересующийся
Отправить личное сообщение для denis_kontarev Посмотреть профиль Найти все сообщения от denis_kontarev
 
Регистрация: 01.04.2018
Сообщений: 29

Благодарю ребята! Функции просто божественные!!)) Очень выручили
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не правильно применяется функция в цикле dand1 Events/DOM/Window 2 04.06.2014 06:53
Функция или метод click() jsjob Общие вопросы Javascript 8 15.01.2013 00:19
Как сделать чтоб функция выволнялась по click один раз или просто выполнялась? TaH4uk.pro jQuery 1 06.12.2012 21:41
Jquery функция в цикле rostrid Общие вопросы Javascript 2 22.02.2011 21:47
Привязка события click в цикле к эелементц craz Events/DOM/Window 8 14.11.2010 12:28