Jquery 如果有X行以上，则显示滚动菜单

我做了这个JSFIDLE：

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

我正在努力做下一件事：

如果

的行数小于7，则仅显示行数（对于4

显示4行菜单。对于2，显示2）。但如果有7个或更多，则显示一个滚动条

感谢您的帮助
 添加

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

你的
.menu
css在没有JS的情况下获得所需的结果，如果这足够好的话？更简单更快。
添加

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

你的
.menu
css在没有JS的情况下获得所需的结果，如果这足够好的话？更简单更快。
我会基于em而不是固定的像素高度，因此高度基于列表文本的大小：

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


在a标记的顶部和底部都有.5em的填充，因此每个列表项的行高为1.25em+1em的填充=2.25em。对于作为最大高度的7个列表项，最大高度为7*2.25=15.75 ems。
我会基于em而不是固定的像素高度，因此高度基于列表文本的大小：

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


在a标记的顶部和底部都有.5em的填充，因此每个列表项的行高为1.25em+1em的填充=2.25em。对于7个列表项作为最大高度，最大高度为7*2.25=15.75 ems。
使用简单的数学公式，您需要将高度停止到（7*36）其中7等于您要显示的
li
的数量，36等于个人
li
的高度，因此简单地添加到您的
。菜单
分类以下规则

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

使用简单的数学公式，您需要将高度停止到（7*36），其中7等于您要显示的
li
的数量，36等于个人
li
的高度。因此，简单地将以下规则添加到
菜单中

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

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

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

哪个位卡住了-计算元素或显示滚动条？哪个位卡住了-计算元素或显示滚动条？我想你需要将高度更新为252px，等于7*36我想你需要将高度更新为252px，等于7*36