本文主要详细介绍javascript实现下拉菜单。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
用Javascript实现下拉菜单，供大家参考。具体情况如下
在学习前端，如有不规范和不正确的想法，请见谅。谢谢你的建议。
下拉菜单或侧下拉菜单在实际开发中非常实用。
代码：
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题标题/标题
风格
*{
填充：0；
边距：0；
边框：0；
}。菜单{
宽度：100%；
高度：50px
边框：1px纯色浅黄色；
box-shadow: 0 2px 5px黑色；
}。菜单部分{
/*边距-顶部：10px*/
浮动：左；
宽度：19.82%；
高度：50px
/*边框：1px纯红；*/
文本对齐：居中；
}
按钮{
边距-顶部：15px
光标：指针；
宽度：25px
高度：15px
背景色：粉色；
}
. show1
显示：无；
宽度：19.82%；
高度：250px
/*边框：1px纯黑；*/
}
. show1 div{
边框：1px纯粉色；
宽度：247px
高度：48px
文本对齐：居中；
}
一个{
文字-装饰：无；
显示：块；
页边距-顶部：10px
}
答：悬停{
颜色：# ff242d
字体大小：25px
}
/风格
/头
身体
div class='菜单'
第1部分
button^/button
/div
Div 2
button^/button
/div
Div 3
button^/button
/div
Div 4
button^/button
/div
Div 5
button^/button
/div
/div
div class='show1 '
diva href='#' 4654tyyut/a/div
diva href='#' 4654/a/div
diva href='#' sdf/a/div
diva href='#' sdf/a/div
diva href='# '叔/a/div
/div
脚本
var BTN=document . query selector(' button ')
var show 1=document . query selector(' . show 1 ')
var标志=0
btn.onclick=function () {
if (flag===0) {
show1.style.display='block '
标志=1
}否则{
show1.style.display='none '
标志=0
}
}
/脚本
/body
/html
代码解释
这里主要用脚本的onclick来实现。我这里用的按钮也可以换成其他东西，做法也差不多。
一旦onclick对应的东西，就会触发事件，调用函数，然后判断flag的值来执行相应的操作，隐藏/显示div。
在这里，标志是关键，当click事件发生时，该变量在0.1之间不断变化。点击一次，函数执行一次，即循环一次，即判断flag的值，从而达到显示/隐藏的效果。
演示效果
当没有被拉下时
后下拉
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。