js 实现下拉菜单完整代码

一、js实现下拉菜单

二、代码：
1.html

<ul id="divBox"><li class="myLi" onclick="openS(this,0)"><span class="iconfont icon-maobi front"></span>            <span class="font">Diseno web</span>            <span class="iconfont icon-jiantouxiangxia back"></span>            <ul class="myUl"><li>Photoshop</li><li>Html</li> <li>css</li>                <li>Photoshop</li>            </ul>        </li>        <li class="myLi" onclick="openS(this,1)">            <span class="iconfont icon-maobi front"></span>            <span class="font">Diseno web</span>            <span class="iconfont icon-jiantouxiangxia back"></span>           <ul class="myUl">                <li>Javascript</li>               <li>JQuery</li>              <li>Framework</li>           </ul>     </li>    <li class="myLi" onclick="openS(this,2)">        <span class="iconfont icon-maobi front"></span>       <span class="font">Diseno web</span>           <span class="iconfont icon-jiantouxiangxia back"></span>   <ul class="myUl">            <li>Photoshop</li>             <li>Html</li>        <li>css</li>      <li>Photoshop</li> </ul>    </li> <li class="myLi" onclick="openS(this,3)">     <span class="iconfont icon-maobi front"></span>    <span class="font">Diseno web</span>           <span class="iconfont icon-jiantouxiangxia back"></span>        <ul class="myUl">               <li>Photoshop</li>             <li>Html</li>              <li>css</li>               <li>Photoshop</li>        </ul>       </li></ul>

2.css

* {    margin: 0;    padding: 0;}
body {    background-color: slategray;}
#divBox {    width: 300px;    height: 800px;    margin: 0 auto;}
li {    width: 300px;    /* height: 50px; */    list-style: none;    line-height: 50px;    outline: hotpink 1px solid;    background-color: snow;    cursor: pointer;}
.front {    color: gray;    font-size: 20px;}
.back {    color: grey;    font-size: 20px;    padding-left: 150px;}
.font {}
.myUl {    width: 300px;    /* height: 200px; */    display: none;    transition: all 0.5s linear;}
.myUl>li {    background-color: khaki;}
.myUl>li:hover {    background-color: lawngreen;}/* @keyframes transf {    0% {        transform: rotate(0deg);    }    50% {        transform: rotate(180deg);    }    100% {        transform: rotate(20deg);    }} */

3.js

let myUl = document.getElementsByClassName('myUl');
let myLi = document.getElementsByClassName('myLi');
let back = document.getElementsByClassName('back')
console.log(myUl)console.log(myLi)
function openS(obj, num) {
if (myUl[num].style.display === 'none' || myUl[num].style.display === '') {
myUl[num].style.display = 'block';
// back[num].style.animation = 'transf 0.5s linear forwards'
console.log(back[num].style)
} else {        myUl[num].style.display = 'none';       // back[num].style.animation = ''    }//判断是否为当前点击的，不是则不展开    for (let i = 0; i < myLi.length; i++) {        if (myLi[i] !== obj) {           myUl[i].style.display = 'none';       } }}

js 实现下拉菜单完整代码相关推荐

动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
简单下拉菜单html,JavaScript简单下拉菜单实例代码
本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最 ...
HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...
用JS控制下拉菜单效果
今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写 ...
使用Jquery、HTML、CSS、JS实现下拉菜单列表
下拉菜单列表当鼠标进入时,效果如下: 鼠标离开时,下拉列表进行隐藏.效果如下: 下面展示代码 // <!DOCTYPE html> <html lang="en" ...
原生JS实现下拉菜单操作
原生JavaScript实现下拉菜单的操作逻辑分析: (1)该布局实现分为两个部分,导航栏部分以及下拉菜单部分,因此我们需要使用标签的嵌套,一共使用两对ul和li标签,外面的ul构成导航栏的框架,在 ...
html JS实现下拉菜单,vue.js怎么实现下拉框
本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现下拉框的方法: www.php.cn vue下拉框 {{x.name}}{{x.famname}} {{on ...
android 美团下拉菜单,Android仿美团分类下拉菜单实例代码
本文实例为大家分享了Android仿美团下拉菜单的实现代码,分类进行选择,供大家参考,具体内容如下效果图操作平台 AS2.0 第三方框架:butterknife build.gradle depe ...
php ajax联动下拉列表,PHP和Ajax实现二级联动下拉菜单（代码、详细注释）
数据库 ................................................................................................ ...

js 实现下拉菜单完整代码

js 实现下拉菜单完整代码相关推荐

最新文章

热门文章

js 实现下拉菜单 完整代码

js 实现下拉菜单 完整代码相关推荐

最新文章

热门文章

js 实现下拉菜单完整代码

js 实现下拉菜单完整代码相关推荐