您的位置:首页 > Web前端 > JQuery

jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示

2016-08-11 19:32 363 查看
jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示

关键思路就是在父菜单栏的hover函数里再加入子菜单的hover函数

jq代码:

$(function() {

    PopoutMenu("police_computer_network");

});

function PopoutMenu(v) {

    $('#' + v).find('li').hide();

    $('#' + v).find('.m_itemMain').hover(

            function() {

                 $('#' + v).find('li').hover(function() {

                     $('#' + v).find('li').show();

                },

                        function() {

                             $('#' + v).find('li').hide()

                        }

                );

                $(this).prev().find('li').show().end().siblings().find('li').hide();

            },

            function() {

                 $('#' + v).find('li').hover(function() {

                     $('#' + v).find('li').show();

                },

                        function() {

                             $('#' + v).find('li').hide()

                        }

                );

                $(this).prev().find('li').hide().end().siblings().find('li').show()

            }

    );

}

HTML代码:

 <div id="police_computer_network" >

                <ul>          

                            <li><a href="#" target="_blank">XXXXX</a></li>                 

                </ul>

                <div class="m_itemMain m_up">全国公安网</div>

            </div>

效果如图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  鼠标 jquery 函数 hover