yunzhonghe105
yunzhonghe105
2017-08-29 03:23
采纳率: 60%
浏览 871

jQuery 如何制作下拉菜单

如下图,当鼠标移入第n个li,如何使第n个div显示,移出隐藏。用jQuery代码怎么写

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • qq_29594393
    当作看不见 2017-08-29 03:27
    已采纳

    按照描述这应该是选项卡,而不是下拉菜单
    http://blog.csdn.net/qq_29594393/article/details/52891881
    有完整可运行代码参考

    点赞 评论
  • huang931027
    IAmObject 2017-08-29 03:37

    这玩意不是插件挺多的么

    点赞 评论
  • u014074697
    张大教主 2017-08-29 06:47
    //正好有空,给你写了一个,直接贴到html文件,双击看效果
    <html>
        <head>
            <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
            <style>
                ul>li {
                    float:left;
                    width:200px;
                    height:30px;
                    text-align:center;
                    line-height:30px;
                    padding-left:10px;
                    border:1px solid #fff;
                    background:#add2f9;
                }
                ul>li:hover{
                    background:#20ADE5;
                }
                .subnav{
                    position:relative;
                    top:0px;
                    left:-50px;
                    display:none;
                }
            </style>
            <script>
                $(function(){
                    $("body").click(function(){
                        $("ul li>.subnav").css('display','none');
                    });
                    $("ul>li").click(function(e){
                        e.stopPropagation()
                        var subnav=$(this).find('.subnav');
                        var subnavDis=subnav.css('display');
                        $("ul li>.subnav").css('display','none');
                        if(subnavDis=='none'){
                            subnav.css('display','block');
                        }
                        else{
                            subnav.css('display','none');
                        }
                    });
                })
            </script>
        </head>
        <body>
            <ul>
                <li><span>1</span>
                    <ul class="subnav">
                        <li><span>1.1</span></li>
                        <li><span>1.2</span></li>
                        <li><span>1.3</span></li>
                        <li><span>1.4</span></li>
                    </ul>
                </li>
                <li><span>2</span>
                    <ul class="subnav">
                        <li><span>2.1</span></li>
                        <li><span>2.2</span></li>
                        <li><span>2.3</span></li>
                        <li><span>2.4</span></li>
                    </ul>
                </li>
                <li><span>3</span>
                    <ul class="subnav">
                        <li><span>3.1</span></li>
                        <li><span>3.2</span></li>
                        <li><span>3.3</span></li>
                        <li><span>3.4</span></li>
                    </ul>
                </li>
                <li><span>4</span>
                    <ul class="subnav">
                        <li><span>4.1</span>
                        </li>
                        <li><span>4.2</span></li>
                        <li><span>4.3</span></li>
                        <li><span>4.4</span></li>
                    </ul>
                </li>
            </ul>
        </body>
    </html>
    
    点赞 评论
  • songwz123
    songwz123 2017-08-29 07:54

    在每个 li 上面加两个事件 onMouseOver onMouseOut

    点赞 评论
  • u014292161
    前端○萌妹 2017-08-29 08:50

    这种效果叫做 table切换

    点赞 评论

相关推荐