html
<nav class="list " id="headerNavList">
<div class="list_box noScrollbar" id="headerNav">
<div class="item">111111</div>
<div class="item">22222</div>
<div class="item">33333</div>
</div>
<div class="dianBox hidden">
<div class="dian">···</div>
<div class="dianList" id="navDianList">
<div class="item">111111</div>
<div class="item">22222</div>
<div class="item">33333</div>
</div>
</div>
</nav>
js
function topNavShowMore() {
var headerNavDom = document.getElementById('headerNav');
var dianBoxDom = document.getElementById('headerNavList').getElementsByClassName('dianBox')[0];
var headerNavDomChildren = headerNavDom.children;
var navDianListChildren = document.getElementById('navDianList').children;
let domInfo = headerNavDom.getBoundingClientRect()
var domWidth = domInfo.width + domInfo.left;
var hiddenIndex = -1;
for (let index = 0; index < headerNavDomChildren.length; index++) {
const item = headerNavDomChildren[index];
let info = item.getBoundingClientRect();
if ((info.left + info.width + 44) > domWidth) {
if (hiddenIndex === -1) {
hiddenIndex = index;
}
item.classList.add('opacity0');
navDianListChildren[index].classList.remove('hidden');
} else {
item.classList.remove('opacity0');
navDianListChildren[index].classList.add('hidden');
}
}
if (hiddenIndex != -1) {
if (hiddenIndex === 0) {
dianBoxDom.style.left = '0px';
} else {
const item = headerNavDomChildren[hiddenIndex];
let info = item.getBoundingClientRect();
dianBoxDom.style.left = (info.left - domInfo.left - 20) + 'px';
}
dianBoxDom.classList.remove('hidden');
} else {
dianBoxDom.classList.add('hidden');
}
}