phpstudy集成环境

 首页 > 正学习做一个类似京东首页左侧的分类导航，要求鼠标能从A分类斜着滑动到B分类上,求前端各大牛正解?

正学习做一个类似京东首页左侧的分类导航，要求鼠标能从A分类斜着滑动到B分类上,求前端各大牛正解?

需要的效果如图所示，但我写的代码出现如下问题：1，当鼠标沿着红色箭头斜着滑动到B分类区域时，B分类隐藏了。怎么写才能让鼠标进入A类且斜着从A区域滑动到B区域过程中，B分类不隐藏且一直显示呢？
2，从A分类平行滑动到B分类时，B分类也隐藏了！为什么出现这种情况？此处代码应该如何修改？
3，A分类和B分类交叉处，有一个实线，如何取消？z-index写错了吗？应该如何写，才能让实线取消掉？
附加：在class="box-sort"的div和id="float_boxbooks"的div保持对等且相对独立关系的情况下(A区域和B区域相对独立),鼠标从id="spanbooks"的span区域沿着红色箭头滑动到id="float_boxbooks" 的div区域过程中，如何修改代码才能保证id="float_boxbooks"的div不隐藏呢？不想做成父与子的结构。
我写的代码如下，请解释错误出现的具体原因；规范的代码应该如何写？能否替小弟详细注释一下呢？谢谢各位大牛啦............！！！！:-D
http://jsbin.com/xiticuk/edit?html,output

链接描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script  type="text/javascript">
    
    $(document).ready(function () {
        
        var newpositionbooks = $("#div_probooks").position();
        $("#float_boxbooks").css("position", "absolute");
        $("#float_boxbooks").css("left", newpositionbooks.left + 115); //距离左边距
        $("#float_boxbooks").css("top", newpositionbooks.top + 2); //距离上边距
        $("#spanbooks").mouseenter(function () {
            $("#float_boxbooks").show();
        });
        $("#float_boxbooks").mouseleave(function () {
            $("#float_boxbooks").hide();
        });
        $("#libooks").mouseleave(function () {
            $("#float_boxbooks").hide();
        });
    
    
     })
    
    
    </script>
    <style>
    
    
    .box-sort_title:hover{
        border: 2px solid #f23b09; width: 100px;border-right: none;height:30px;background-color: #ffffff;}
    .box-sort_title a {text-decoration: none;}
    .box-sort_title {z-index:9999;position:absolute;}
    .box-sort_title {
        left: 3px;
        position: absolute;
        z-index: 10;
    }
    .box-sort_content span {
        margin: 0 16px;
    }
    .span-rows span {
        display: inline-block;
        letter-spacing: normal;
        vertical-align: top;
    }
    a {font-family:"Microsoft Yahei";}
    ol, ul, li ,a{
        list-style: outside none none;font-family:"Microsoft Yahei";
    }
    
    .item-list .subitem { float:left; width:630px; padding:0px 4px 0px 2px; }
    .item-list .subitem dl { border-top:1px solid #EEE; padding:6px 0px; overflow:hidden; zoom:1; }
    .item-list .subitem .fore1 { border-top:none; width: 610px;}
    .item-list .subitem dt { float:left; width:60px; line-height:22px; text-align:right; padding:3px 6px 0px 0px; font-weight:700; color:#E4393C; }
    .item-list .subitem dt a { color:#E4393C; text-decoration:underline; }
    .item-list .subitem dd { float:left; width:480px; padding:3px 0px 0px; overflow:hidden; }
    .item-list .subitem dd em { float:left; height:14px; line-height:14px; padding:0px 8px; margin-top:5px; border-left:1px solid #CCC; }
    .item-list .subitem dd em a, .item-list .cat-right dd a { color:#666; text-decoration:none; }
    .item-list .subitem dd em a:hover, .item-list .cat-right dd a:hover { font-weight:normal; text-decoration:underline; }
    .item-list .cat-right { float:right; width:210px; }
    .item-list .cat-right dl { width:194px; padding:6px 8px; }
    .item-list .cat-right dd { padding-top:6px; line-height:22px; overflow:hidden; padding:3px 0px 0px; }
    .item-list .cat-right dt { padding:3px 6px 0px 0px; font-weight:700; color:#E4393C;  }
    .item-list .cat-right dd a:hover { color:#666; }
    </style>
</head>
<body>
<div class="box-sort" monkey="cool">
<ul class="m span-rows box-sort_content box-sort_last">    
<li id="libooks">
<span id="spanbooks" class="box-sort_title"><a href="book.htm" id="div_probooks">书籍</a>、<a href="//mvd.jd.com/" target="_blank">音像</a></span>  <span > <a href="http://mvd.jd.com/">文学</a></span><span><a href="https://www.bookbub.com/">英文原版</a></span><span><a href="http://mvd.jd.com/">小说</a></span><span><a href="http://gen.lib.rus.ec/">经济</a></span><span><a href="http://mvd.jd.com/">哲学/宗教</a></span><span><a href="http://mvd.jd.com/">家庭与育儿</a></span>
</li>
</ul>
</div>

<div id="float_boxbooks" style="display:none;border:2px solid #f23b09;background:#fefefe;z-index:9989;position:relative;">

            <div class="item-list clearfix">

                    <div class="subitem">
                        <dl class="fore1">
                            <dt><a href="#">主流</a></dt>
                            <dd><em><a href="#">free</a></em><em><a href="#">dress</a></em><em><a href="#">trouser</a></em><em><a href="#">shoes</a></em><em><a href="#">文学</a></em><em><a href="#">经管</a></em><em><a href="#">畅读VIP</a></em><em><a href="#">畅读VIP</a></em><em><a href="#">畅读VIP</a></em></dd>
                        </dl>
                        <dl class="fore2">
                            <dt><a href="#">电子</a></dt>
                            <dd><em><a href="#">通俗流行</a></em><em><a href="#">古典音乐</a></em><em><a href="#">摇滚说唱</a></em><em><a href="#">爵士蓝调</a></em><em><a href="#">乡村民谣</a></em><em><a href="#">有声读物</a></em></dd>
                        </dl>
                        <dl class="fore3">
                            <dt><a href="#">音像</a></dt>
                            <dd><em><a href="#">音乐</a></em><em><a href="#">影视</a></em><em><a href="#">教育音像</a></em><em><a href="#">游戏</a></em></dd>
                        </dl>
                        <dl class="fore4">
                            <dt>艺术</dt>
                            <dd><em><a href="#">小说</a></em><em><a href="#">文学</a></em><em><a href="#">青春文学</a></em><em><a href="#">传记</a></em><em><a href="#">艺术</a></em></dd>
                        </dl>
                        <dl class="fore5">
                            <dt>人文社科</dt>
                            <dd><em><a href="#">历史</a></em><em><a href="#">心理学</a></em><em><a href="#">政治/军事</a></em><em><a href="#">国学/古籍</a></em><em><a href="#">哲学/宗教</a></em><em><a href="#">社会科学</a></em></dd>
                        </dl>
                        <dl class="fore6">
                            <dt>经管励志</dt>
                            <dd><em><a href="#">经济</a></em><em><a href="#">金融与投资</a></em><em><a href="#">管理</a></em><em><a href="#">励志与成功</a></em></dd>
                        </dl>
                        <dl class="fore7">
                            <dt>生活</dt>
                            <dd><em><a href="#">家庭与育儿</a></em><em><a href="#">旅游/地图</a></em><em><a href="#">烹饪/美食</a></em><em><a href="#">时尚/美妆</a></em><em><a href="#">家居</a></em><em><a href="#">婚恋与两性</a></em><em><a href="#">娱乐/休闲</a></em><em><a href="#">健身与保健</a></em><em><a href="#">动漫/幽默</a></em><em><a href="#">体育/运动</a></em></dd>
                        </dl>
                        <dl class="fore8">
                            <dt>科技</dt>
                            <dd><em><a href="#">科普</a></em><em><a href="#">IT</a></em><em><a href="#">建筑</a></em><em><a href="#">医学</a></em><em><a href="#">工业技术</a></em><em><a href="#">电子/通信</a></em><em><a href="#">农林</a></em><em><a href="#">科学与自然</a></em></dd>
                        </dl>
                        <dl class="fore9">
                            <dt>少儿</dt>
                            <dd><em><a href="#">少儿</a></em><em><a href="#">0-2岁</a></em><em><a href="#">3-6岁</a></em><em><a href="#">7-10岁</a></em><em><a href="#">11-14岁</a></em></dd>
                        </dl>
                        <dl class="fore10">
                            <dt>教育</dt>
                            <dd><em><a href="#">教材教辅</a></em><em><a href="#">考试</a></em><em><a href="#">外语学习</a></em></dd>
                        </dl>
                        <dl class="fore11">
                            <dt>其它</dt>
                            <dd><em><a href="#">英文原版书</a></em><em><a href="#">港台图书</a></em><em><a href="#">工具书</a></em><em><a href="#">套装书</a></em><em><a href="#">杂志/期刊</a></em></dd>
                        </dl>
                    </div>

             </div>
        </div>
    
    

    
</body>

</html>

二级菜单思路，在一个大盒子里写2个ul，ul分在2边一个显示，一个隐藏，
获取盒子里面li（jq里的这一步$("#box li")之所以这么做是因为只要鼠标不离开box里面的所有li，右侧的导航就不会消失），加个鼠标划入事件，让右边隐藏的导航栏显示，hove还有个自带的划出事件，在添加属性让他隐藏，
下面是jq代码记得要自己引入js文件<script src="js/jquery-1.11.1.min.js"></script>。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background: #f88;
        }
        #box {
            height: 210px;
            width: 200px;
            padding-right: 400px;
            margin: 0 auto;
        }
        
        #gps_left {
            position: absolute;
            float: left;
            width: 200px;
            height: 210px;
            background: #f00;
        }
        
        #gps_left li {
            width: 200px;
            height: 30px;
            font: 12px/30px '微软雅黑';
        }
        
        #gps_right {
            position: relative;
            left: 200px;
            top: 0;
            float: left;
            width: 400px;
            height: 210px;
            overflow: hidden;
            display: none;
        }
        
        #gps_right li {
            width: 400px;
            height: 210px;
            font: 12px/210px '微软雅黑';
            display: none;
            background: #f0f;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul id="gps_left">
            <li>111111</li>
            <li>22222</li>
            <li>3333</li>
            <li>44444</li>
            <li>555</li>
            <li>666</li>
            <li>7777</li>
        </ul>
        <ul id="gps_right">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </div>
</body>
<script>
    $("#box li").hover(function () {
        var $indes = ($(this).index()) //获取下标
        $('#gps_right').css('display', 'block');
        $('#gps_right li').css('display', 'none').eq($indes).css('display', 'block');
    }, function () {
        $('#gps_right').css('display', 'none');
        $('#gps_right li').css('display', 'none');
    })
</script>

</html>

html:

li.mainmenu>a+div.submenu

js:

$mainmenu.on('mouseover',function(){$submenu.show();});

说白了就是把要显示隐藏的内容submenu包裹在容器mainmenu中，事件绑定到mainmenu就可以了。
这样悬浮到mainmenu时，显示内容submenu本身就属于mainmenu区域里的内容，所以你挪到submenu区域，也是不存在问题的。

正在研究这两篇文章和github中的代码：

亚马逊导航菜单的秘密链接描述
亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读链接描述

大致意思就是建立一个三角缓冲区，详细实现参见原作者提供的插件源码

<父分类>
    <父标题></父标题>
    <子分类></子分类>
</父分类>

父分类:hover 子分类 {
    display: block;
}

套用一下楼上回复，其实这个效果以及JS是很简单的，结构写好，就是一句JS的问题。

嵌套结构

1、保持以下结构，父分类相对定位，子分类绝对定位。即使鼠标移入子分类中，在 DOM 树中，还是在父分类包含中，hover 状态仍然有效。

<父分类>
    <父标题></父标题>
    <子分类></子分类>
</父分类>

父分类:hover 子分类 {
    display: block;
}

2、同 1

3、父标题相对定位，边框设置上左下，z-index 设置大于子分类；子分类调整位置让父标题遮住一部分边框。

嵌套结构的实现 不需要JS。

并列结构

<容器>
   <父分类列表>
        <分类A></分类A>
        ...
   </父分类列表>
   <子父类列表>
        <分类A的子分类></分类A的子分类>
        ...
   </子分类列表>
</容器>

  1. 当鼠标浮动于一个父分类时，根据索引显示对应子分类（通过添加 class 控制当前父子分类样式和显示，移除非当前父分类和子分类的class）

  2. 只有鼠标移出最外层容器时，才移除控制样式和显示的 class

只有鼠标进入容器，保证只高亮一个父分类及展开其对应子分类，容器内只存在切换高亮和显示状态，只有鼠标离开容器才彻底清除状态。

这个结构需要写两个事件，父分类的 mouseenter 和容器的 mouseleave。

示例：
https://jsfiddle.net/imys/cs2dx7hs/

相互独立结构

如图所示，子菜单里实际上包含了一个溢出容器的父菜单项，当子菜单显示时遮挡住对应的父菜单项。

需要给父分类添加 mouseenter 和子分类容器的 mouseleave 事件，由于两者相互独立，所以显示时需要计算子菜单显示的位置。

我已经黔驴技穷了，把老底都掏完了。

delay不行么……

【热门文章】
【热门文章】