我在 this page 底部设置了一个响应式表格。我需要帮助弄清楚为什么移动视图中的按钮不起作用。
我使用的代码来自 this page
<!-- DIRTY Responsive pricing table HTML -->
<article>
<ul>
<li class="bg-purple">
<button>Self-Employed</button>
</li>
<li class="bg-blue">
<button>Simple Start</button>
</li>
<li class="bg-blue active">
<button>Essentials</button>
</li>
<li class="bg-blue">
<button>Plus</button>
</li>
</ul>
<table>
<thead>
<tr>
<th class="hide"></th>
<th class="bg-purple">Self-Employed</th>
<th class="bg-blue">Simple Start</th>
<th class="bg-blue default">Essentials</th>
<th class="bg-blue">Plus</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monthly price</td>
<td><span class="txt-top">£</span><span class="txt-l">6</span></td>
<td><span class="txt-top">£</span><span class="txt-l">7</span></td>
<td class="default"><span class="txt-top">£</span><span class="txt-l">15</span></td>
<td><span class="txt-top">£</span><span class="txt-l">25</span></td>
</tr>
<tr>
<td colspan="5" class="sep">Get started easily</td>
</tr>
<tr>
<td>Includes free updates and new features as they become available</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>No software to install — sign up online in moments</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Import customer & supplier details from Excel, Outlook and .csv</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Accept card payments in QuickBooks Online</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td colspan="5" class="sep">Stay protected and get support</td>
</tr>
<tr>
<td>Free telephone and online support</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Strong encryption protects your business data</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Automatic data backups</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
</tbody>
</table>
</article>
表格顶部的标题应该是可点击的,但它们不起作用。
作为旁注,我添加了一个 .matrix 类,这样 ul 和 li css 就不会干扰网站的主导航的 ul。
答案 0 :(得分:0)
header 有 2 组:ul -> li 和 thead -> th。
!important css 覆盖 jquery css 样式。
// DIRTY Responsive pricing table JS
function showColumn(element) {
$("#pricing tr").find('td:not(:first)').hide();
$("#pricing tr").find('th:not(:first)').hide();
$("#pricing .active").removeClass('active');
var pos = element.prop("tagName").toLowerCase() == "th" ? element.index() + 1 : element.index() + 2;
$('#pricing td:nth-child('+pos+')').show();
$('#pricing th:nth-child('+pos+')').addClass('active').show();
$("#pricing .sep").prop("colspan", $("#pricing tr:first").find("th:visible").length);
}
$(document).ready(function() {
$("#pricing ul").show();
$("#pricing ul").on("click", "li", function() {
showColumn($(this));
});
$("#pricing table").on("click", "#pricing thead th:not(:first)", function() {
showColumn($(this));
});
$("#pricing table").one("click", "#pricing thead th:first", function() {
$("#pricing td,th").css('display','table-cell');
$("#pricing .sep").prop("colspan", $("#pricing tr:first").find("th:visible").length);
});
$("#pricing table").find("thead th:first").trigger("click");
$("#pricing table").find("thead th:nth-child(2)").trigger("click");
});
// Initialize the media query
var mediaQuery = window.matchMedia('(min-width: 640px)');
// Add a listen event
mediaQuery.addListener(doSomething);
// Function to do something with the media query
function doSomething(mediaQuery) {
if (mediaQuery.matches) {
$('#pricing .sep').attr('colspan',5);
} else {
$('#pricing .sep').attr('colspan',2);
}
}
// On load
doSomething(mediaQuery);
/* DIRTY Responsive pricing table CSS */
/*
- make mobile switch sticky
*/
* {
box-sizing:border-box;
padding:0;
margin:0;
outline: 0;
}
body {
font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
font-size:14px;
padding:14px;
}
article {
width:100%;
max-width:1000px;
margin:0 auto;
height:1000px;
position:relative;
}
ul {
display:flex;
top:0px;
z-index:10;
padding-bottom:14px;
}
li {
list-style:none;
flex:1;
}
li:last-child {
border-right:1px solid #DDD;
}
button {
width:100%;
border: 1px solid #DDD;
border-right:0;
border-top:0;
padding: 10px;
background:#FFF;
font-size:14px;
font-weight:bold;
height:60px;
color:#999
}
li.active button {
background:#F5F5F5;
color:#000;
}
table { border-collapse:collapse; table-layout:fixed; width:100%; }
th { background:#F5F5F5; display:none; }
td, th {
height:53px
}
td,th { border:1px solid #DDD; padding:10px; empty-cells:show; }
td,th {
text-align:left;
}
td+td, th+th {
text-align:center;
display:none;
}
td.default {
display:table-cell;
}
.bg-purple {
border-top:3px solid #A32362;
}
.bg-blue {
border-top:3px solid #0097CF;
}
.sep {
background:#F5F5F5;
font-weight:bold;
}
.txt-l { font-size:28px; font-weight:bold; }
.txt-top { position:relative; top:-9px; left:-2px; }
.tick { font-size:18px; color:#2CA01C; }
.hide {
border:0;
background:none;
}
@media (min-width: 640px) {
ul {
display:none;
}
td,th {
display:table-cell;
}
td,th {
width: 330px;
}
td+td, th+th {
width: auto;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- DIRTY Responsive pricing table HTML -->
<div id="topBar">
<div style="float:left; width: 80%">Guest</div>
<div style="float:right; text-align:right; width: 20%">Search</div>
<div style="clear:both"></div>
</div>
<article>
<div id="pricing">
<ul>
<li class="bg-purple">
<button>Self-Employed</button>
</li>
<li class="bg-blue">
<button>Simple Start</button>
</li>
<li class="bg-blue active">
<button>Essentials</button>
</li>
<li class="bg-blue">
<button>Plus</button>
</li>
</ul>
<table>
<thead>
<tr>
<th class="hide"></th>
<th class="bg-purple">Self-Employed</th>
<th class="bg-blue">Simple Start</th>
<th class="bg-blue default">Essentials</th>
<th class="bg-blue">Plus</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monthly price</td>
<td><span class="txt-top">£</span><span class="txt-l">6</span></td>
<td><span class="txt-top">£</span><span class="txt-l">7</span></td>
<td class="default"><span class="txt-top">£</span><span class="txt-l">15</span></td>
<td><span class="txt-top">£</span><span class="txt-l">25</span></td>
</tr>
<tr>
<td colspan="5" class="sep">Get started easily</td>
</tr>
<tr>
<td>Includes free updates and new features as they become available</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>No software to install — sign up online in moments</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Import customer & supplier details from Excel, Outlook and .csv</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Accept card payments in QuickBooks Online</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td colspan="5" class="sep">Stay protected and get support</td>
</tr>
<tr>
<td>Free telephone and online support</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Strong encryption protects your business data</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Automatic data backups</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
</tbody>
</table>
</div>
</article>