Как сделать расширяемые ячейки таблицы скрытыми по умолчанию с помощью jQuery / JavaScript и щелкнуть мышью за пределами метки?

Question

У меня есть этот короткий фрагмент кода, который позволяет сворачивать разделы таблицы (они похожи на сворачиваемые заголовки). Это красиво, но я пытаюсь сделать так, чтобы при загрузке страницы происходило обратное - по умолчанию она сворачивалась при загрузке, но при нажатии открывалась. Как мне go это сделать?

В моем нынешнем коде, показанном ниже, также есть разделы, которые сворачиваются только при щелчке по словам в разделе, а не когда сам раздел (за пределами слов) щелкнул. Это потому, что я использовал ярлыки, чтобы сделать складной. Есть ли способ сделать всю строку расширяемой / сворачиваемой?

table {
  width: 100%;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
}

[data-toggle="toggle"] {
  display: none;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tbody class="labels">
      <tr>
        <td colspan="2">
          <label for="section">Click me!</label>
          <input type="checkbox" id="section" data-toggle="toggle">
        </td>
      </tr>
    </tbody>
    <tbody class="hide">
      <tr>
        <td>Jack</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>300</td>
      </tr>
    </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('[data-toggle="toggle"]').change(function() {
      $(this).parents().next('.hide').toggle();
    });
  });
</script>

Answer 1

Я пытаюсь сделать так, чтобы при загрузке страницы происходило обратное - по умолчанию она сворачивалась при загрузке, но расширялась при нажатии. Как мне go сделать это?

Просто добавьте строку в jquery над функцией переключения и вызовите свой .hide селектор классов и используйте .hide(); Затем при нажатии на нее срабатывает функция переключения.

также имеет разделы, которые сворачиваются только при щелчке по словам в разделе, а не при щелчке по самому разделу (за пределами слов). Это потому, что я использовал ярлыки, чтобы сделать складной. Есть ли способ сделать всю строку расширяемой / сворачиваемой?

Да ... Сделайте так, чтобы ваша метка отображалась как блок в вашем CSS файле ...

label {
  display: block;
} 

$(document).ready(function() {
  $('.hide').hide();
  $('[data-toggle="toggle"]').change(function() {
    $(this).parents().next('.hide').toggle();
  });
});

table {
  width: 100%;
}

table,
tr,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-family: Arial;
}

[data-toggle="toggle"] {
  display: none;
}

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tbody class="labels">
      <tr>
        <td colspan="2">
          <label for="section">Click me!</label>
          <input type="checkbox" id="section" data-toggle="toggle">
        </td>
      </tr>
    </tbody>
    <tbody class="hide">
      <tr>
        <td>Jack</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>300</td>
      </tr>
    </tbody>
</table>

Answer 2

Здесь происходит несколько вещей ...

1. Вы скрывали свой флажок, что, я не думаю, было вашим намерением.
2. Посмотрите этот пример, где я исправил некоторые вещи: https://jsfiddle.net/za73qf65/

Исправления включают:

• изменение имени вашего класса «hide» на «hidable»
• по умолчанию этот "скрытый" класс равен display:none
• отображение вашего флажка
• изменение вашего change() обработчика событий на click() (необязательно)
• прикрепление вашего обработчик событий для кнопки с идентификатором (вы можете изменить это)

Дело в том, что с моими изменениями ваш пример работает. Возможно, вы захотите настроить его для более точных c потребностей.