关于切换子菜单项目,似乎有多个问题答案。
然而,我正试图在一个HTML中创建子菜单项目。table
.
在页面加载时,我想让子菜单项目显示为打开,就像这样。
你可以通过点击子菜单中的任意位置来切换子菜单,使其变成 "关闭"。<tr>
附带 close-submenu
类(用于测试5或测试6)。
我试着把子菜单项目(行和表数据)放在divs里,但是我的jQuery没有工作。事实上,如果我把divs设置为 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>
这里是一个... 链接到JSFiddle. 正如你所看到的,子菜单的divs无论是否显示在 active
或不。
我看到你是在与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>