Форум

рони · #11 (**permalink**) 14.02.2019, 12:16

Сообщение от 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>

laimas · #12 (**permalink**) 14.02.2019, 15:32

рони, а как это может быть при display: table-row-group?

рони · #13 (**permalink**) 14.02.2019, 15:59

Сообщение от laimas

а как это может быть при display: table-row-group?

строка 7

<style type="text/css">
  tbody.st {
    display : table-row-group;
  }
  </style>

laimas · #14 (**permalink**) 14.02.2019, 16:02

А я читаю конец выражения. Да класс переключать можно, у него JQ, значит .toggleClass().

рони · #15 (**permalink**) 14.02.2019, 16:11

Сообщение от 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>

Malleys · #16 (**permalink**) 14.02.2019, 17:18

Сообщение от рони

$(function() {
$('.spoiler').on('click', '.trigger', function(event) {
   $('.st', event.delegateTarget).toggleClass('show');
});
});

Чтобы не вешать обработчик на каждый элемент можно использовать делегирование

$(document).on("click", ".trigger", function() {
	$(".st", this.parentNode).toggleClass("show");
});

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

denis_kontarev · #17 (**permalink**) 14.02.2019, 17:50

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

Форум

Справочник

Discord чат

Курсы javascript