响应式表移动按钮不起作用
Posted
技术标签:
【中文标题】响应式表移动按钮不起作用【英文标题】：Responsive Table Mobile Buttons Not Working 【发布时间】：2021-05-18 22:58:06 【问题描述】：我在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。
【问题讨论】：
欢迎来到 Stack Overflow！是否可以添加您用于针对此 HMTL 的 CSS，并将代码放在可运行的 sn-p 中？ 【参考方案1】：有 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>【讨论】：
新的 javascript 大大改进了表格在移动设备上的显示！谢谢！但是在加载时，它会显示整个表格。直到您单击一个按钮，它才会显示单个部分。但是，如果您单击“Annual Membership Dues”单元格上方的隐藏空间，它会再次显示整个表格。有没有办法解决这个问题？ 将 $("article table").on("click") 更改为 $("article table").one("click")。然后单击用户的哪一列 $("article table").find("thead th:nth-child(2)").trigger("click"); 工作得很好！有没有办法隔离代码，使其不会影响包含登录、搜索栏和社交图标的页面顶部的表格？它在最后一次更改后消失了。 应该通过不同div包含的唯一id来标识。 他们都有唯一的ID。所以我可以通过添加#id_223lJck display: contents !important; 在顶部显示登录按钮、搜索栏和社交图标。所以现在看起来一切正常。感谢您的帮助！以上是关于响应式表移动按钮不起作用的主要内容，如果未能解决你的问题，请参考以下文章