关于javascript修改二级菜单display属性的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

关于javascript修改二级菜单display属性的问题

2016-03-17 12:27:24 2017 0

网页的主体是菜单,二级菜单是隐藏的,以下为一个“书籍”菜单的代码。其中二级菜单的高的数值比一级菜单的要大,所以限制了一级菜单的高度,也声明了二级菜单的高度,计算后的二级菜单的高度也是声明了的二级菜单的高度,但是js控制二级菜单的时候,鼠标指针在二级菜单的停留的高度是一级菜单的高度。
代码如下:

 <div id="book">
            <div id="menu1" class="menu" onmouseover="changeDisplay1()" onmouseout="recoverDisplay1()" >
                <p class="title">书&nbsp&nbsp籍</p>
            </div>
            <div id="frame1" class="frame" style="display:none;" onmouseover="this.style.display='block'" onmouseout="this.style.display='none'">
                <ul style="color:#FFF;font-family:STFangsong;width:450px;margin-left:100px;margin-top:10px;padding-top:5px;">
                    <li>
                        &nbsp&nbsp&nbsp文&nbsp&nbsp艺&nbsp&nbsp&nbsp|<a href="../二级页面/index2.html">小说</a> <a href="../二级页面/index2.html">文学</a> <a href="../二级页面/index2.html">传记</a> <a href="../二级页面/index2.html">艺术</a> <a href="../二级页面/index2.html">青春文学</a>
                    </li>
                    <li>
                        人文社科|<a href="../二级页面/index2.html">历史</a> <a href="../二级页面/index2.html">心理学</a> <a href="../二级页面/index2.html">政治/军事</a> <a href="../二级页面/index2.html">国学/古籍</a>           <a href="../二级页面/index2.html">哲学/宗教</a> <a href="../二级页面/index2.html">社会科学</a>
                    </li>
                    <li>
                        经管励志|<a href="../二级页面/index2.html">经济</a> <a href="../二级页面/index2.html">管理</a> <a href="../二级页面/index2.html">金融与投资</a> <a href="../二级页面/index2.html">励志与成功</a>
                    </li>
                    <li>
                        &nbsp&nbsp&nbsp科&nbsp&nbsp技&nbsp&nbsp&nbsp|<a href="../二级页面/index2.html">科普</a> <a href="../二级页面/index2.html">IT</a> <a href="../二级页面/index2.html">建筑医学</a> <a href="../二级页面/index2.html">工业通信</a> <a href="../二级页面/index2.html">电子技术</a>         <a href="../二级页面/index2.html">农林</a> <a href="../二级页面/index2.html">科学与自然</a>
                    </li>
                    <li>
                        &nbsp&nbsp&nbsp教&nbsp&nbsp育&nbsp&nbsp&nbsp|<a href="../二级页面/index2.html">教材</a> <a href="../二级页面/index2.html">教辅</a> <a href="../二级页面/index2.html">考试</a> <a href="../二级页面/index2.html">外语学习</a>
                    </li>
                </ul>
            </div>
        </div>
 #book{
    height:75px;
}
.menu{
    background:url("image/menu.png");
    background-repeat:no-repeat;
    width:328px;
    height:68px;
    padding-top:7px;
}
#menu1{
    margin-left:120px;
}
#frame1{
    background:url("image/frame1.png");
    background-size:100%;
    background-repeat:no-repeat;
    width:600px;
    height:188px;
    margin-top:-80px;
    margin-left:378px;
}
 function changeDisplay1(){
    document.getElementById("frame1").style.display="block";
}
function recoverDisplay1(){
    document.getElementById("frame1").style.display="none";
}
取消 提交回答
全部回答(0)
相关问答

1

回答

传统的表单控件textarea元素不支持通过javascript设置readonly属性示例是什么?

2022-03-14 21:48:28 229浏览量 回答数 1

1

回答

JavaScript 类数组对象的定义?

2020-04-04 10:34:37 538浏览量 回答数 1

1

回答

如何将JavaScript对象的属性值提取到数组中?

2020-02-09 12:58:43 256浏览量 回答数 1

1

回答

JavaScript关联数组的长度

2020-02-09 14:05:51 366浏览量 回答数 1

1

回答

JavaScript 怎么对数组进行 回调操作 的不影响原数组?

2016-04-09 13:12:39 1559浏览量 回答数 1

1

回答

javascript中的数组,对象的使用

2016-03-20 12:45:39 1747浏览量 回答数 1

2

回答

javascript中如何将字符数组转为整型数组

2016-03-19 11:05:34 2523浏览量 回答数 2

1

回答

javascript如何验证数组是否存在某元素

2016-03-19 11:32:27 1738浏览量 回答数 1

1

回答

javascript如何遍历django传来的数组

2016-03-17 13:22:57 3025浏览量 回答数 1

1

回答

javascript如何遍历django传来的数组

2016-03-12 13:23:46 1842浏览量 回答数 1
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载