Javascript 使用jquery的响应菜单

我正在准备响应菜单。当我们调整屏幕大小时，菜单项将向下显示，但问题是单击红色按钮工作正常。刷新页面时，所有项目都可见。我想在它被隐藏之前点击红色按钮，然后菜单就会出现。 它是这样来的我想隐藏溢出菜单

onClick工作正常。在单击之前，它将被隐藏

var h=30；
var=0；
$（'.click'）。单击（函数（）{
if（$（'ul li.menu item'）.hasClass（'show'））{
$（'ul li.menu item'）。removeClass（'show'）；
$（'ul li.menu item'）。removeClass（'drop'））
返回；
}
val=0；
$（'ul li.menu item'）。每个（函数（）{
var of=$（this.offset（）.top-$（'ul li.menu item'）.offset（）.top；
如果（of>20）{
$（this.addClass（'drop'）.css（'opcaity'，'1'）；；
$（this.css（'top'，'calc（100%+'+val+'px）'）；
val+=h；
}
$（'ul li.menu item'）.addClass（'show'）；
})
})

。主菜单{
位置：相对位置；
宽度：64%；
保证金：0自动；
最大高度：50px；
溢出：hiddin；
背景：#ccc；
}
菜单项{
框大小：边框框；
位置：相对位置；
}
.菜单项{
显示：内联块；
文字装饰：无；
颜色：#000000；
字体大小：20px；
填充：10px；
文本转换：大写；
列表样式：无；
背景色：#88c0c7；
位置：相对位置；
}
滴{
显示：块；
位置：绝对位置；
右：0；
}
ul子菜单{
弯曲方向：立柱；
位置：绝对位置；
顶部：52px；
显示：无；
背景色：#000；
颜色：#fff；
}
.菜单项：悬停ul.子菜单{
显示：块；
}
.下拉ul.子菜单{
位置：绝对位置；
最高：36%；
左-72%；
}
.点击{
位置：绝对位置；
不透明度：0；
背景：红色；
右-5%；
前-2%；
宽度：40px；
高度：40px；
保证金：4倍；
z指数：2；
}
.隐藏{
不透明度：0；
}
/*小型桌面分辨率和iPad环境
======================================================================== */
@仅介质屏幕和（最小宽度：960像素）和（最大宽度：1024像素）{
.点击{
不透明度：1；
右：2%；
}
}
/*iPad人像
======================================================================== */
@仅介质屏幕和（最小宽度：768px）和（最大宽度：959px）{
.点击{
不透明度：1；
右：2%；
}
}

主页

菜单1
菜单2
菜单3


关于我们
服务

菜单1
菜单2
菜单3


产品
软件包
联系
菜单7
menu8
菜单9
菜单10
菜单11

菜单1
菜单2
菜单3


菜单12
菜单13
菜单14

菜单1
菜单2
菜单3

希望这会有用

var h=30；
var=0；
$（'ul li.menu item'）。每个（函数（）{
var of=$（this.offset（）.top-$（'ul li.menu item'）.offset（）.top；
如果（of>20）{
$（this.addClass（'hide'）；
}
})
$（'.click'）。单击（函数（）{
if（$（'ul li.menu item'）.hasClass（'hide'））{
$（'ul li.menu item'）。removeClass（'hide'）；
}
$（'ul li.menu item'）。每个（函数（）{
if（$（this）.hasClass（'drop'））{
$（this.addClass（'hide'）；
}
});
if（$（'ul li.menu item'）.hasClass（'show'））{
$（'ul li.menu item'）。removeClass（'show'）；
$（'ul li.menu item'）。removeClass（'drop'））
返回；
}
val=0；
$（'ul li.menu item'）。每个（函数（）{
var of=$（this.offset（）.top-$（'ul li.menu item'）.offset（）.top；
如果（of>20）{
$（this.addClass（'drop'）.css（'opcaity'，'1'）；；
$（this.css（'top'，'calc（100%+'+val+'px）'）；
val+=h；
}
$（'ul li.menu item'）.addClass（'show'）；
})
})

。主菜单{
位置：相对位置；
宽度：100%；
保证金：0自动；
最大高度：50px；
溢出：hiddin；
背景：#ccc；
}
菜单项{
框大小：边框框；
位置：相对位置；
}
.菜单项{
显示：内联块；
文字装饰：无；
颜色：#000000；
字体大小：20px；
填充：10px；
文本转换：大写；
列表样式：无；
背景色：#88c0c7；
位置：相对位置；
}
滴{
显示：块；
位置：绝对位置；
右：0；
}
ul子菜单{
弯曲方向：立柱；
位置：绝对位置；
顶部：52px；
显示：无；
背景色：#000；
颜色：#fff；
}
.菜单项：悬停ul.子菜单{
显示：块；
}
.下拉ul.子菜单{
位置：绝对位置；
最高：36%；
左-72%；
}
.点击{
位置：绝对位置；
不透明度：0；
背景：红色；
右-5%；
前-2%；
宽度：40px；
高度：40px；
保证金：4倍；
z指数：2；
}
.隐藏{
不透明度：0；
}
/*小型桌面分辨率和iPad环境
======================================================================== */
@仅介质屏幕和（最小宽度：960像素）和（最大宽度：1024像素）{
.点击{
不透明度：1；
右：2%；
}
}
/*iPad人像
======================================================================== */
@仅介质屏幕和（最小宽度：768px）和（最大宽度：959px）{
.点击{
不透明度：1；
右：2%；
}
}

主页