Question

我做了这个jsfiddle：http://jsfiddle.net/alonshmiel/2PeEK/

这会在用户按下图像时显示一个菜单，如果用户再次按下则会关闭菜单。

我正在尝试做下一件事：

如果<li>的数量小于7，则仅显示行数（4 <li>显示4行菜单。对于2，显示2）。但如果有<li>或更多，请显示滚动。

任何帮助表示赞赏！

Answer 1

添加

  max-height: 240px;
  overflow-y: auto;

到你的.menu css获得没有JS的必要结果，如果这足够好的话？更简单，更快捷。

Answer 2

我会根据em而不是固定的像素高度进行操作，因此高度取决于列表文本的大小：

.menu {
    max-height: 15.75em;
    overflow-y: auto;
    font-size:1em;
    line-height:1.25em;
}

http://jsfiddle.net/3DWKP/1/

你在a标签上有填充顶部和底部的.5em，所以每个列表项的行高1.25em + 1em padding = 2.25em。对于7个列表项目作为最大高度，最大高度为7 * 2.25 = 15.75 ems。

Answer 3

使用简单的数学方程式，您需要将高度停止为（7 * 36），其中7等于您要显示的li的数量，36等于单个li的高度，这样简单的添加向.menu班级提供以下规则

.menu{
    max-height: 240px;
    overflow-y: auto;
    //the rest of yout css rules
}

Answer 4

如果您想在不设置CSS中的硬值的情况下动态计算它

var m = $('.menu'), //cache for performance
mh = m.height(), //get actual height
lih = mh / $('.menu li').length, //calculate the height of one of the LI's
max = 7, //what's the max amount of rows we want to show
mth = lih *max; //the height the container should be set to

然后只做一个条件

if(mh > (lih * max)){ //if the menu height is greater than 7 li's
    m.css({'maxHeight' : mth, 'overflow-y': 'scroll'});
}else{ //it's not greater
    m.css({'maxHeight': 'none', 'overflow-y' : 'auto'}); 
}

Here's the Fiddle

如果有超过X行，则显示滚动菜单

4 个答案: