适应移动端时,发现按钮组的长度不够显示5个,只够4个,所以加了两个左右切换的按钮<和>,逻辑如下:
html
<div class="table-head" id="table_head">
<span>
<img src="img/web/aboutMe/up.png" alt="" style="transform: rotate(-90deg);" onclick="showFirst()">
</span>
<button type="button" class="isclick">全部</button>
<button type="button" class="noclick">产品类</button>
<button type="button" class="noclick">技术类</button>
<button type="button" class="noclick">运营</button>
<button type="button" class="noclick">行政/后勤</button>
<span>
<img src="img/web/aboutMe/up.png" alt="" style="transform: rotate(90deg);" onclick="showLast()">
</span>
</div>
js
function showFirst() {
var butName = $('.isclick')[0].innerText
if (butName === '行政/后勤') {
$('#table_head button').eq(0).removeClass('noclick').addClass('isclick');
// $('.is-fold').removeClass('is-fold').addClass('un-fold');
// $('#1-1').addClass('is-fold').removeClass('un-fold');
}
$('#table_head').children().eq(1).show();
$('#table_head').children().eq(5).hide();
}
function showLast() {
var butName = $('.isclick')[0].innerText
if (butName === '全部') {
$('#table_head button').eq(4).removeClass('noclick').addClass('isclick');
// $('.is-fold').removeClass('is-fold').addClass('un-fold');
// $('#1-1').addClass('is-fold').removeClass('un-fold');
}
$('#table_head').children().eq(5).show();
$('#table_head').children().eq(1).hide();
}