Regina23 2014-12-22 11:36 采纳率: 100%
浏览 2151
已采纳

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

网页的主体是菜单,二级菜单是隐藏的,以下为一个“书籍”菜单的代码。其中二级菜单的高的数值比一级菜单的要大,所以限制了一级菜单的高度,也声明了二级菜单的高度,计算后的二级菜单的高度也是声明了的二级菜单的高度,但是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";
}
  • 写回答

2条回答 默认 最新

  • 娃都会打酱油了 2014-12-23 02:05
    关注

    贴个html标签被封杀了,不明觉厉。。。。分明用代码块包含了,那就只贴个js部分的代码了,
    menu和submenu对应你的menu1和frame1,要用mouseleave,而不能用mouseout
    $(document).ready(function () {
    var t = null;
    $('#dv_Menu').mouseenter(function () {
    console.info("main enter");
    $('#dv_SubMenu').show();
    }).mouseleave(function () {
    t = setTimeout(function () {
    console.info("main out");
    $('#dv_SubMenu').hide();
    }, 200);
    });

            $('#dv_SubMenu').mouseenter(function () {
                console.info("sub enter");
                if (t != null) {
                    clearTimeout(t);
                    t = null;
                }
            }).mouseleave(function () {
                console.info("sub out");
                $(this).hide();
            });
        });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 广告联盟的兜底广告是什么意思
  • ¥15 如何证明高斯噪声的包络公式
  • ¥150 寻找王者荣耀开发作者,合作或者解答
  • ¥15 乳腺癌数据集 相关矩阵 特征选择
  • ¥15 我的游戏账号被盗取,请问我该怎么做
  • ¥15 通关usb3.0.push文件,导致usb频繁断连
  • ¥15 有没有能解决微信公众号,只能实时拍照,没有选择相册上传功能,我不懂任何技术,,有没有给我发个软件就能搞定的方法
  • ¥15 Pythontxt文本可视化
  • ¥15 如何基于Ryu环境下使用scapy包进行数据包构造
  • ¥15 springboot国际化