二级下拉框java如何存储数据 js二级下拉菜单

转载

footballboy 2023-06-14 17:34:46

文章标签 二级下拉框java如何存储数据二级菜单 html for循环 文章分类 Java 后端开发

之前在网上看到如何用jquery来实现二级下拉菜单，jquery对事件应用的方法都比较直接且简单高效，但是我们这不利于我们对于原生的JS的理解。在此，我使用原生JS来实现下拉二级菜单。

实现下拉二级菜单的方法有多种

　　1.给一级菜单和二级菜单设置一个div，并且使其二级菜单部分隐藏。

　　2.设置好CSS样式后，给每一个一级菜单都添加一个onmouseover事件和onmouseout事件，这种方法有一个明显的缺陷，就是当一级菜单比较多的时候，会造成代码冗余。

　　3.使用for循环结合children结构伪类选择器来实现其鼠标移入下拉的功能。

　　html和css如下所示

<div id="nav">
                <ul>
                    <li>
                        <a href="#">html元素</a>
                        <div>
                            <a href="#">list-style</a>
                            <a href="#">decoration</a>
                            <a href="#">line-height</a>
                        </div>
                    </li>
                    <li>
                        <a href="#">js部分</a>
                        <div>
                            <a href="#">事件冒泡</a>
                            <a href="#">跨域</a>
                            <a href="#">ajax</a>
                        </div>
                    </li>
                    <li>
                        <a href="">jquery方法</a>
                        <div>
                            <a href="#">filter</a>
                            <a href="#">has</a>
                            <a href="#">find</a>
                            <a href="#">html</a>
                        </div>
                    </li>
                </ul>
            </div>

　　这里的html使用的实例嵌套div的方法，结构比较简单。

<style type="text/css">
            *{
                margin: 0px;
                padding:0px;
                font-size: 20px;
            }
            #nav{
                width:440px;
                background: #9ACD32;
                margin:auto;
            }
            #nav ul{
                list-style: none;
            }
            #nav ul li{
                width:110px;
                float: left;
            }
            #nav ul li a{
                display: block;
                text-decoration: none;
                text-align: center;
                background: #FF9090;
            }
            #nav ul li a:hover{
                background: #CCCCDD;
            }
            #nav ul li div {
                font-size: 18px;
                display: none;    
                
            }
            #nav ul li div a{
                font-size: 16px;
                line-height: 25px;
                text-align: center;
                background: #CCCCDD;    
                transition: background 2s;
            }
            #nav ul li div a:hover{
                background: #FF9090;
                font-size:19px;
            }
        </style>

　　以上就是整个代码的结构层和表现层了，现在为了实现鼠标移入下拉菜单的功能。

<script type="text/javascript">
        window.onload=function(){
            var aLi=document.getElementById("nav").getElementsByTagName("li"); 
            for(var i=0; i<aLi.length;i++){
                
                aLi[i].onmouseover=function(){
                    this.children[1].style.display='block';//选取当前li元素的第二个子元素
                }
                aLi[i].onmouseout=function(){
                    this.children[1].style.display='none';
                }
            }
        }
    </script>

this.children[1]的含义，我们在对ul下的li做了for循环之后，需要的是将display为none的div显示出来，听过children伪类选择器可以选择li的第二个子元素（选择器部分，可以查w3cshool）。通过这种选择器，我们在只使用一次for循环就实现了鼠标移入菜单下拉的功能。

---恢复内容结束---