在 HTML 表格中切换子菜单列表

Question

似乎有多个关于切换子菜单项的问题/答案，

jQuery toggle submenu

jQuery toggle based submenu toggles all submenus

但是，我正在尝试在 HTML table 中创建子菜单项。

在页面加载时，我希望子菜单项显示为打开状态，如下所示：

您可以通过单击具有close-submenu 类的<tr> 中的任意位置（用于测试5 或测试6）将子菜单切换为“关闭”：

我尝试将子菜单项（行和表数据）放在 div 中，但我的 jQuery 不起作用。事实上，如果我将 div 设置为 display: none，它们仍然会显示。

所以我想知道 - 是否可以在 HTML 表格中实现切换功能？

这是我尝试过的：

function submenuClose() {
  $(document)
    .on('click', '.close-submenu', function () {
      $(this).closest('.submenu-list-container').removeClass('active');
    })
}

submenuClose();

.table-container {
    padding: 20px;
}

#table-2 {
    padding-top: 0!important;
}

.my-card-table {
    width: 100%;
    border: 1px solid #D9D7D6;
    table-layout: fixed!important;
}

.exam-or-tutorial-tabs {
    display: flex;
    cursor: pointer;
}

.exams-tab {
    border-top-left-radius: 3px;
}

.tab-tab {
    font-family: "Proxima Nova Bold";
    display: flex;
    padding: 10px 20px 10px 20px;
    color: #ffffff;
}

.tab-tab.active {  
    background-color: #1481C3;
}

.tab-tab.inactive {
    background-color: #a7a7a7;
}

.tutorial-tab {
    border-top-right-radius: 3px;
}

.table-heading {
    text-align: center;
    border-right: 1px solid rgba(0,0,0,.125);
    border-top: 1px solid rgba(0,0,0,.125);
    border-left: 1px solid rgba(0,0,0,.125);
}

.left-table-data {
    padding-left: 15px!important;
}

#special-table-heading-first {
    padding-left: 25px!important;
}

.my-card-table-heading {
    background-color: #E9E9E9!important;
    font-family: "Proxima Nova Regular";
    color: #000000;
    font-size: 1rem;
    padding: 10px 5px 10px 5px;
}

.special-table-heading-middle {
    padding-left: 13px!important;
}

.special-table-heading-last {
    padding-left: 25px!important;
}

.my-card-link-2 {
    color: #0e5b8b;
}

.table-link {
  text-decoration: none;
}

.complete-link {
  color: #666666;
}

.take-test-button {
    color: #ffffff;
    background-color: #1481C3;
    font-family: "Proxima Nova Bold";
    border-radius: 3px;
    border: none;
    padding: 5px 15px 5px 15px;
    transition: 0.3s ease;
}

.take-test-button:hover {
    color: #ffffff;
    background-color: #096DA9;
}

.in-progress {
    background-color: #0e5b8b;
    transition: 0.3s ease;
}

.in-progress:hover {
    background-color: #025398;
}

.taken {
    background-color: #A7A7A7;
    color: #E6E6E6;
}

.taken:hover {
    background-color: #A7A7A7;
    color: #E6E6E6;
}

.grey-row,
tbody tr:nth-child(2n) {
    background-color: #F2F3F3;
}

.white-row,
tbody tr:nth-child(2n - 1) {
    background-color: #ffffff;
}

.submenu-list-container {
  display: none;
}

.submenu-list-container.active {
  display: block;
}

.close-submenu {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-container" id="table-2">
            <table class="my-card-table"><!--CogAT Tests Table-->
              <div class="exam-or-tutorial-tabs">
                <div class="exams-tab tab-tab active">Exams</div>
                <div class="tutorial-tab tab-tab inactive">Tutorial</div>
              </div>
              <div class="table-heading">
                  Exam Logo Here
              </div>
              <tr class="my-card-table-heading">
                <th class="my-card-table-heading left-table-data" id="special-table-heading-first">Test</th>
                <th class="my-card-table-heading special-table-heading-middle">Start Date</th>
                <th class="my-card-table-heading special-table-heading-middle">Status</th>
                <th class="my-card-table-heading special-table-heading-last">Action</th>
              </tr>
              <tr class="my-card-table-row-grey">
                <td class="left-table-data">Test 1</td>
                <td class="">Sept 9, 2020</td>
                <td><a href="" onclick="return false" class="my-card-link-2">Complete</a></td>
                <td><button class="take-test-button taken">Take Test</td>
              </tr>
              <tr class="my-card-table-row-white">
                <td class="left-table-data">Test 2</td>
                <td class="">Sept 9, 2020</td>
                <td><a href="" onclick="return false" class="my-card-link-2">Complete</a></td>
                <td><button class="take-test-button taken">Take Test</button></td>
              </tr>
              <tr class="my-card-table-row-grey">
                <td class="left-table-data">Test 3</td>
                <td class="">Sept 9, 2020</td>
                <td><a href="" onclick="return false" class="my-card-link-2">Complete</a></td>
                <td><button class="take-test-button taken">Take Test</button></td>
              </tr>
              <tr class="my-card-table-row-white close-submenu">
                <td class="left-table-data">Test 4</td>
                <td class="">Sept 9, 2020</td>
                <td><a href="" onclick="return false" class="my-card-link-2">In Progress</a></td>
                <td><button class="take-test-button in-progress">Continue</button></td>
              </tr>
                  <!--submenu-->
                  <div class="submenu-list-container active">
                    <tr class="my-card-table-row-white submenu-item">
                      <td class="left-table-data">Part 1</td>
                      <td>Sept 9, 2020</td>
                      <td>Complete</td>
                      <td><a class="table-link complete-link" href="">Take Test</a></td>
                    </tr>
                    <tr class="my-card-table-row-white submenu-item">
                      <td class="left-table-data">Part 2</td>
                      <td>Sept 9, 2020</td>
                      <td>In Progress</td>
                      <td><a class="table-link" href="">Take Test</a></td>
                    </tr>
                  </div>
              <tr class="my-card-table-row-grey close-submenu">
                <td class="left-table-data">Test 5</td>
                <td class="">Sept 9, 2020</td>
                <td><a href="" onclick="return false" class="my-card-link-2">In Progress</a></td>
                <td><button class="take-test-button in-progress">Continue</button></td>
              </tr>
                  <!--submenu-->
                  <div class="submenu-list-container active">
                    <tr class="my-card-table-row-white submenu-item">
                      <td class="left-table-data">Part 1</td>
                      <td>Sept 9, 2020</td>
                      <td>Complete</td>
                      <td><a class="table-link complete-link" href="">Take Test</a></td>
                    </tr>
                    <tr class="my-card-table-row-white submenu-item">
                      <td class="left-table-data">Part 2</td>
                      <td>Sept 9, 2020</td>
                      <td>In Progress</td>
                      <td><a class="table-link" href="">Take Test</a></td>
                    </tr>
                  </div>
              <tr class="my-card-table-row-white">
                <td class="left-table-data">Test 6</td>
                <td class="">Sept 9, 2020</td>
                <td><a href="" onclick="return false" class="my-card-link-2">Not Yet Started</a></td>
                <td><button class="take-test-button">Take Test</button></td>
              </tr>
              <tr class="my-card-table-row-grey">
                <td class="left-table-data">Test 7</td>
                <td class="">Sept 9, 2020</td>
                <td><a href="" onclick="return false" class="my-card-link-2">Not Yet Started</a></td>
                <td><button class="take-test-button">Take Test</button></td>
              </tr>
            </table>
          </div>

这是Link to JSFiddle。如您所见，无论是否为active，都会显示子菜单div。

Answer 1

我看到你不同意 HTML 语义 :) 所以我修复了它。以下是我的解决方案。

const buttons = document.querySelectorAll('[data-submenu]');

buttons.forEach(button => {
  button.addEventListener('click', e => {
    const getSubmenuNumber = e.currentTarget.hasAttribute('data-submenu') ? e.currentTarget.getAttribute('data-submenu') : '';
    const numbers = document.querySelectorAll(`[data-submenu-element="${getSubmenuNumber}"]`);

    numbers.forEach(number => {
      number.classList.toggle('active');
    })
  })
})

.table-container {
  padding: 20px;
}

#table-2 {
  padding-top: 0 !important;
}

.my-card-table {
  width: 100%;
  border: 1px solid #D9D7D6;
  table-layout: fixed !important;
}

.exam-or-tutorial-tabs {
  display: flex;
  cursor: pointer;
}

.exams-tab {
  border-top-left-radius: 3px;
}

.tab-tab {
  font-family: "Proxima Nova Bold";
  display: flex;
  padding: 10px 20px 10px 20px;
  color: #ffffff;
}

.tab-tab.active {
  background-color: #1481C3;
}

.tab-tab.inactive {
  background-color: #a7a7a7;
}

.tutorial-tab {
  border-top-right-radius: 3px;
}

.table-heading {
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, .125);
  border-top: 1px solid rgba(0, 0, 0, .125);
  border-left: 1px solid rgba(0, 0, 0, .125);
}

.left-table-data {
  padding-left: 15px !important;
}

#special-table-heading-first {
  padding-left: 25px !important;
}

.my-card-table-heading {
  background-color: #E9E9E9 !important;
  font-family: "Proxima Nova Regular";
  color: #000000;
  font-size: 1rem;
  padding: 10px 5px 10px 5px;
}

.special-table-heading-middle {
  padding-left: 13px !important;
}

.special-table-heading-last {
  padding-left: 25px !important;
}

.my-card-link-2 {
  color: #0e5b8b;
}

.table-link {
  text-decoration: none;
}

.complete-link {
  color: #666666;
}

.take-test-button {
  color: #ffffff;
  background-color: #1481C3;
  font-family: "Proxima Nova Bold";
  border-radius: 3px;
  border: none;
  padding: 5px 15px 5px 15px;
  transition: 0.3s ease;
}

.take-test-button:hover {
  color: #ffffff;
  background-color: #096DA9;
}

.in-progress {
  background-color: #0e5b8b;
  transition: 0.3s ease;
}

.in-progress:hover {
  background-color: #025398;
}

.taken {
  background-color: #A7A7A7;
  color: #E6E6E6;
}

.taken:hover {
  background-color: #A7A7A7;
  color: #E6E6E6;
}

.grey-row,
tbody tr:nth-child(2n) {
  background-color: #F2F3F3;
}

.white-row,
tbody tr:nth-child(2n - 1) {
  background-color: #ffffff;
}

.submenu-list-container {
  display: none;
}

.submenu-list-container.active {
  display: block;
}

.close-submenu {
  cursor: pointer;
}

.active {
  display: table-row !important;
}

<div class="table-container" id="table-2">
  <!--CogAT Tests Table-->
  <div class="exam-or-tutorial-tabs">
    <div class="exams-tab tab-tab active">Exams</div>
    <div class="tutorial-tab tab-tab inactive">Tutorial</div>
  </div>
  <table class="my-card-table">
    <thead>
      <tr>
        <th colspan="4">
          <div class="table-heading">
            Exam Logo Here
          </div>
        </th>
      </tr>
      <tr class="my-card-table-heading">
        <th class="my-card-table-heading left-table-data" id="special-table-heading-first">Test</th>
        <th class="my-card-table-heading special-table-heading-middle">Start Date</th>
        <th class="my-card-table-heading special-table-heading-middle">Status</th>
        <th class="my-card-table-heading special-table-heading-last">Action</th>
      </tr>
    </thead>
    <tr class="my-card-table-row-grey">
      <td class="left-table-data">Test 1</td>
      <td class="">Sept 9, 2020</td>
      <td><a href="" class="my-card-link-2">Complete</a></td>
      <td><button class="take-test-button taken">Take Test</td>
        </tr>
        <tr class="my-card-table-row-white">
          <td class="left-table-data">Test 2</td>
          <td class="">Sept 9, 2020</td>
          <td><a href="" class="my-card-link-2">Complete</a></td>
          <td><button class="take-test-button taken">Take Test</button></td>
    </tr>
    <tr class="my-card-table-row-grey">
      <td class="left-table-data">Test 3</td>
      <td class="">Sept 9, 2020</td>
      <td><a href="" class="my-card-link-2">Complete</a></td>
      <td><button class="take-test-button taken">Take Test</button></td>
    </tr>
    <tr data-submenu="1" class="my-card-table-row-white close-submenu">
      <td class="left-table-data">Test 4</td>
      <td class="">Sept 9, 2020</td>
      <td><a href="" class="my-card-link-2">In Progress</a></td>
      <td>
        <button class="take-test-button in-progress">Continue</button>
      </td>
    </tr>
    <tr data-submenu-element="1" class="submenu-list-container my-card-table-row-white submenu-item">
      <td class="left-table-data">Part 1 submenu</td>
      <td>Sept 9, 2020</td>
      <td>Complete</td>
      <td><a class="table-link complete-link" href="">Take Test</a></td>
    </tr>
    <tr data-submenu-element="1" class="submenu-list-container my-card-table-row-white submenu-item">
      <td class="left-table-data">Part 2 submenu</td>
      <td>Sept 9, 2020</td>
      <td>In Progress</td>
      <td><a class="table-link" href="">Take Test</a></td>
    </tr>
    <tr data-submenu="2" class="my-card-table-row-grey close-submenu">
      <td class="left-table-data">Test 5</td>
      <td class="">Sept 9, 2020</td>
      <td><a href="" class="my-card-link-2">In Progress</a></td>
      <td>
        <button class="take-test-button in-progress">Continue</button>
      </td>
    </tr>
    <tr data-submenu-element="2" class="submenu-list-container my-card-table-row-white submenu-item">
      <td class="left-table-data">Part 1 submenu </td>
      <td>Sept 9, 2020</td>
      <td>Complete</td>
      <td><a class="table-link complete-link" href="">Take Test</a></td>
    </tr>
    <tr data-submenu-element="2" class="submenu-list-container my-card-table-row-white submenu-item">
      <td class="left-table-data">Part 2 submenu </td>
      <td>Sept 9, 2020</td>
      <td>In Progress</td>
      <td><a class="table-link" href="">Take Test</a></td>
    </tr>
    <tr data-submenu-element="2" class="submenu-list-container my-card-table-row-white submenu-item">
      <td class="left-table-data">Part 3 submenu </td>
      <td>Sept 9, 2021</td>
      <td>In Progress</td>
      <td><a class="table-link" href="">Take Test</a></td>
    </tr>
    <tr class="my-card-table-row-white">
      <td class="left-table-data">Test 6</td>
      <td class="">Sept 9, 2020</td>
      <td><a href="" class="my-card-link-2">Not Yet Started</a></td>
      <td><button class="take-test-button">Take Test</button></td>
    </tr>
    <tr class="my-card-table-row-grey">
      <td class="left-table-data">Test 7</td>
      <td class="">Sept 9, 2020</td>
      <td><a href="" class="my-card-link-2">Not Yet Started</a></td>
      <td><button class="take-test-button">Take Test</button></td>
    </tr>
  </table>
</div>