将溢出的li包装到下拉列表中

本文介绍了将溢出的li包装到下拉列表中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在制作菜单。我有一个包含许多列表项的菜单。我想要的是当我将浏览器调整到像（笔记本电脑和平板电脑）这样的小屏幕时，我希望溢出的 li的崩溃并出现在下拉列表中。 实际菜单。 同一菜单的响应式视图。 以下是代码结构。 var menuWidth = $（'ul'）。width（）; //获取ulvar的实际宽度listWidth = $ .map（$（'ul li'），function（val）{return $（val）.width（）;}）; //获取arrayvar中每个li的宽度arrayTotalValue = listWidth.reduce（function（a，b）{return a + b;}）; //添加上面的arrayvar totalWidth = Math.ceil（arrayTotalValue）; //舍入总值（总宽度> menuWidth）{$（'li'）。css（{color：'＃FF0000'}）} ul {display：flex;填充：50px 0; box-sizing：border-box; align-items：center;宽度：700px; overflow：visible;} li {text-decoration：none;颜色：＃000000; font-size：20px; text-transform：capitalize;边框：1px纯黑色;保证金：20px 10px; list-style：none;} < script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script><ul> < li class =menu-item> menu1< / li> < li class =menu-item> menu2< / li> < li class =menu-item> menu3< / li> < li class =menu-item> menu4< / li> < li class =menu-item> menu5< / li> < li class =menu-item> menu6< / li> < li class =menu-item> menu7< / li> < li class =menu-item> menu8< / li> < li class =menu-item> menu9< / li> < li class =menu-item> menu10< / li> < li class =menu-item> menu11< / li> < li class =menu-item> menu12< / li> < li class =menu-item> menu13< / li> < li class =menu-item> menu14< / li> < li class =menu-item> menu15< / li> < li class =menu-item> menu16< / li>< / ul> 以下是我的代码的 codepen 链接。 任何建议和答案都会有所帮助。解决方案首先，我会调整CSS以使其更容易。我将启用换行（删除flexbox ）并通过设置 max-height 隐藏所有不在第一行的元素溢出：隐藏。然后我将添加 click 元素，只有在隐藏了至少一个元素时才会看到这些元素。我使用伪元素技巧来隐藏它。 ul {padding：5px 40px 5px 5px; box-sizing：border-box;溢出：隐藏;最大高度：55像素; position：relative;} li {display：inline-block; text-decoration：none;颜色：＃000000; font-size：20px; text-transform：capitalize;边框：1px纯黑色;保证金：10px的; list-style：none; position：relative;} li：last-child :: after {content：;位置：绝对的;左：102％;宽度：100vw;顶部：-10px;底部：-10px;背景：#FFF; z-index：2;}。点击{background：red;位置：相对;宽度：40像素;高度：40像素;保证金左：自动;边距：-65px; margin-right：5px;} < script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script><ul> < li class =menu-item> menu1< / li> < li class =menu-item> menu2< / li> < li class =menu-item> menu3< / li> < li class =menu-item> menu4< / li> < li class =menu-item> menu5< / li> < li class =menu-item> menu6< / li> < li class =menu-item> menu7< / li> < li class =menu-item> menu8< / li> < li class =menu-item> menu9< / li> < li class =menu-item> menu10< / li> < li class =menu-item> menu11< / li> < li class =menu-item> menu12< / li> < li class =menu-item> menu13< / li> < li class =menu-item> menu14< / li>< / ul>< div class =click>< / div> 现在你可以添加一些JS，以便在点击红色方块时通过调整它们的位置来显示隐藏的元素，使它们看起来像一个下拉菜单。要选择隐藏元素，您需要测试其 offesetTop 值是否大于某个值。 var h = 30; var val = 0; $（'。click'）。click（function（）{if（$ （'ul'）。hasClass（'show'））{$（'ul'）。removeClass（'show'）; $（'ul li.menu-item'）。removeClass（'drop'）return;} val = 0; $（'ul li.menu-item'）。each（function（）{var of = $（this）.offset（）。top - $（'ul'）。offset（）。top; if（ of> 20）{$（this）.addClass（'drop'）; $（this）.css（'top'，'calc（100％+'+ val +'px）'）; val + = h; } $（'ul'）。addClass（'show'）;}）}） ul {padding：5px 40px 5px 5px; box-sizing：border-box;溢出：隐藏;最大高度：55px; position：relative;} ul.show {overflow：visible;} li {display：inline-block; text-decoration：none;颜色：＃000000; font-size：20px; text-transform：capitalize;边框：1px纯黑色;保证金：10px 8px; list-style：none; position：relative;} li.drop {display：block;位置：绝对; right：0;} li：last-child :: after {content：;位置：绝对;左：102％;宽度：100vw;上：-10px;底部：-10px;背景：#fff; z-index：2;} li.drop :: after {content：none;}。click {background：red;位置：相对;宽度：40px;身高：40px; margin-left：auto; margin-top：-65px; margin-right：5px;} < script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script><ul> < li class =menu-item> menu1< / li> < li class =menu-item> menu2< / li> < li class =menu-item> menu3< / li> < li class =menu-item> menu4< / li> < li class =menu-item> menu5< / li> < li class =menu-item> menu6< / li> < li class =menu-item> menu7< / li> < li class =menu-item> menu8< / li> < li class =menu-item> menu9< / li> < li class =menu-item> menu10< / li> < li class =menu-item> menu11< / li> < li class =menu-item> menu12< / li> < li class =menu-item> menu13< / li> < li class =menu-item> menu14< / li>< / ul>< div class =click>< / div> 上面是一个简化的例子，我使用了一些你可以轻松调整或动态的硬编码值。 I am working on a menu. I have a menu with many list items. What I want is when I resize the browser to small screens like (laptops and tablets) I want the overflowing li's to collapse and appear in a dropdown.Actual Menu.Responsive view for the same menu.Here is the code structure.var menuWidth = $('ul').width(); //get actual width of ulvar listWidth = $.map($('ul li'), function(val) { return $(val).width();}); //get width of each individual li in an arrayvar arrayTotalValue = listWidth.reduce(function(a, b) { return a + b;}); //adding above arrayvar totalWidth = Math.ceil(arrayTotalValue); //rounding up total valueif (totalWidth > menuWidth) { $('li').css({ color: '#FF0000' })}ul { display: flex; padding: 50px 0; box-sizing: border-box; align-items: center; width: 700px; overflow: visible;}li { text-decoration: none; color: #000000; font-size: 20px; text-transform: capitalize; border: 1px solid black; margin: 20px 10px; list-style: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul> <li class="menu-item">menu1</li> <li class="menu-item">menu2</li> <li class="menu-item">menu3</li> <li class="menu-item">menu4</li> <li class="menu-item">menu5</li> <li class="menu-item">menu6</li> <li class="menu-item">menu7</li> <li class="menu-item">menu8</li> <li class="menu-item">menu9</li> <li class="menu-item">menu10</li> <li class="menu-item">menu11</li> <li class="menu-item">menu12</li> <li class="menu-item">menu13</li> <li class="menu-item">menu14</li> <li class="menu-item">menu15</li> <li class="menu-item">menu16</li></ul>Here is the codepen link of my code.Any kind of suggestion and answers will be helpful. 解决方案 First, I would adjust the CSS in way to make it easier. I will enable the wrap (remove the flexbox) and hide all the elements that aren't in the first row by setting a max-height and overflow:hidden. Then I will add the click element that we will see only when there is at least one element hidden. I used a pseudo element trick to hide it.ul { padding:5px 40px 5px 5px; box-sizing: border-box; overflow: hidden; max-height:55px; position:relative;}li { display:inline-block; text-decoration: none; color: #000000; font-size: 20px; text-transform: capitalize; border: 1px solid black; margin:10px; list-style: none; position:relative;}li:last-child::after { content:""; position:absolute; left:102%; width:100vw; top:-10px; bottom:-10px; background:#fff; z-index:2;}.click { background:red; position:relative; width:40px; height:40px; margin-left:auto; margin-top:-65px; margin-right:5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul> <li class="menu-item">menu1</li> <li class="menu-item">menu2</li> <li class="menu-item">menu3</li> <li class="menu-item">menu4</li> <li class="menu-item">menu5</li> <li class="menu-item">menu6</li> <li class="menu-item">menu7</li> <li class="menu-item">menu8</li> <li class="menu-item">menu9</li> <li class="menu-item">menu10</li> <li class="menu-item">menu11</li> <li class="menu-item">menu12</li> <li class="menu-item">menu13</li> <li class="menu-item">menu14</li></ul><div class="click"></div>Now you may add some JS in order to show the hidden elements when clicking the red square by adjusting their position to make them look like a dropdown. To select a hidden elements you need to test if its offesetTop value is bigger than a certain value.var h = 30;var val = 0;$('.click').click(function() { if ($('ul').hasClass('show')) { $('ul').removeClass('show'); $('ul li.menu-item').removeClass('drop') return; } val = 0; $('ul li.menu-item').each(function() { var of = $(this).offset().top - $('ul').offset().top; if ( of > 20) { $(this).addClass('drop'); $(this).css('top', 'calc(100% + ' + val + 'px)'); val += h; } $('ul').addClass('show'); })})ul { padding: 5px 40px 5px 5px; box-sizing: border-box; overflow: hidden; max-height: 55px; position: relative;}ul.show { overflow: visible;}li { display: inline-block; text-decoration: none; color: #000000; font-size: 20px; text-transform: capitalize; border: 1px solid black; margin: 10px 8px; list-style: none; position: relative;}li.drop { display: block; position: absolute; right: 0;}li:last-child::after { content: ""; position: absolute; left: 102%; width: 100vw; top: -10px; bottom: -10px; background: #fff; z-index: 2;}li.drop::after { content: none;}.click { background: red; position: relative; width: 40px; height: 40px; margin-left: auto; margin-top: -65px; margin-right: 5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul> <li class="menu-item">menu1</li> <li class="menu-item">menu2</li> <li class="menu-item">menu3</li> <li class="menu-item">menu4</li> <li class="menu-item">menu5</li> <li class="menu-item">menu6</li> <li class="menu-item">menu7</li> <li class="menu-item">menu8</li> <li class="menu-item">menu9</li> <li class="menu-item">menu10</li> <li class="menu-item">menu11</li> <li class="menu-item">menu12</li> <li class="menu-item">menu13</li> <li class="menu-item">menu14</li></ul><div class="click"></div>The above is a simplified example where I used some hardcoded values that you can easily adjust or make dynamic. 这篇关于将溢出的li包装到下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！