0

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

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

我正在尝试做下一件事：

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

任何帮助表示赞赏！

4

4 回答 4

3

添加

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

.menu如果这足够好，那么您的css 在没有 JS 的情况下获得所需的结果？更简单、更快捷。

于 2013-07-04T16:43:41.493 回答
1

我会根据 em 而不是固定的像素高度来做，所以高度是基于列表文本的大小：

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

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

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

于 2013-07-04T16:46:29.133 回答
1

使用简单的数学方程式，您需要将高度停止在 (7*36) 中，其中 7 等于li您要显示的数量，36 等于个人的高度，li所以简单地将.menu以下规则添加到您的班级

.menu{
    max-height: 240px;
    overflow-y: auto;
    //the rest of yout css rules
}
于 2013-07-04T16:51:11.013 回答
1

如果您想动态计算它而不在 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'}); 
}

这是小提琴

于 2013-07-04T16:52:51.780 回答