【发布时间】：2015-02-11 12:17:57
【问题描述】：
我有一个可以说 12 个项目的导航，当分辨率变得更小时，项目就会换成新的一行。当一个项目不再适合导航时，我需要这样做，它应该在导航右侧放置一个“更多”下拉按钮。并将不适合的项目放入下拉列表中。 如果您不明白我的意思，请看下面的图片。
但问题是导航项的宽度并不总是相同，因为导航项是从 REST api 生成的。
我尝试制作用于计算项目宽度并将它们添加到导航的 jQuery 脚本。 这是我创建的脚本，我很匆忙，所以它真的很糟糕。
我需要帮助了解如何正确计算项目宽度和导航宽度以及计算何时将项目添加到导航或从导航中删除项目。
如果你不明白，这里是图片：http://img.hr/aagV
/*
* Here we check how many items can we put on the navigation bar
* If item doesn't fit we clone it on the more dropdown button
*/
function removeMany() {
var i = $items.length - 1;
if (itemsWidth > navWidth) {
while (itemsWidth > navWidth) {
$($items[i]).removeClass('first-level-item').addClass('second-level-item');
dropdownItems.push($items[i]);
$($items[i]).removeClass('showed');
$items.pop();
i--;
getItemsWidth();
}
$nav.append($navMore);
dropdownItems.reverse().forEach(function (element, index, array) {
$('ul.second-level').append(element);
});
getItems();
}
}
//If window is resized to bigger resolution we need to put back items on the navbar
function addMany() {
var i = dropdownItems.length - 1;
if (dropdownItems.length != 0) {
do {
$('ul.first-level').append(dropdownItems.reverse()[i]);
$items.push(dropdownItems[i]);
dropdownItems.pop();
i--;
getItemsWidth();
} while (itemsWidth < navWidth);
$navMore.remove();
$items.each(function (i) {
$(this).addClass('first-level-item showed').removeClass('second-level-item');
});
if (!(dropdownItems != 0)) {
return;
} else {
$nav.append($navMore);
}
}
}
body {
margin: 0;
padding: 0;
border: 0; }
ul, li {
margin: 0;
padding: 0;
list-style: none; }
ul.second-level li {
display: block !important; }
ul.second-level li > a {
color: black; }
a {
color: #fff;
text-decoration: none;
text-transform: uppercase; }
.second-level-item a {
color: #333 !important; }
.navigation {
width: 960px;
max-width: 100%;
background: #211;
color: #aaa;
margin: 0 auto; }
.first-level .first-level-item {
display: inline-block;
padding: 10px; }
.first-level .item-more {
display: inline-block; }
.first-level .item-more .second-level-item {
display: inline-block; }
.second-level {
position: absolute;
top: 100%;
right: 0;
width: 200px;
background: #fff;
padding: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); }
.has-second-level {
position: relative; }
.has-second-level .second-level {
display: none; }
.has-second-level:hover {
background: #fff;
color: #000; }
.has-second-level:hover .second-level {
display: block; }
/*# sourceMappingURL=style.css.map */<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DropDown</title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<nav class="navigation">
<ul class="first-level">
<li class="first-level-item showed"><a href="#">Introduction to Irish Culture</a></li>
<li class="first-level-item showed"><a href="#">Cellular and Molecular Neurobiology</a></li>
<li class="first-level-item showed"><a href="#">Guitar foundations</a></li>
<li class="first-level-item showed"><a href="#">Startup Inovation</a></li>
<li class="first-level-item showed"><a href="#">Astrophysics</a></li>
<li class="first-level-item item-more has-second-level">
<span> More </span>
<ul class="second-level">
</ul>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</body>
</html>【问题讨论】：
-
要获得一些回复，请将您的代码缩减为仅与您的问题相关的部分。请不要将您的整个项目放在帖子上。看看这些指南：stackoverflow.com/help/mcve
标签： javascript jquery responsive-design