bootstrap 的下拉菜单变成鼠标滑过后自动下拉

摘要

博主最近在用bootstrap框架做前端的页面，但是bootstrap的下拉菜单为了兼容移动适配 不是鼠标移上去后就自动下拉的。特此分享给大家，bootstrap下拉菜单使用方式。

bootstrap默认的下拉菜单触发的 时机是用户鼠标点击才会弹出菜单，主要是因为bootstrap的下拉菜单为了兼容移动适配 不是鼠标移上去后就自动下拉的。

我在实际应用中发现如果是 WEB网页的话，需要点击一下才能触发下拉菜单这种动作很不友好，至少不能给用户带来快捷、方便的浏览体验，因此 ，我通过增加一些js，来达到改变bootstrap下拉菜单显示的触发动作的事件：

<script>    
$('li.dropdown').mouseover(function() {   
     $(this).addClass('open');    }).mouseout(function() {        $(this).removeClass('open');    }); 
</script>

您在 使用bootstrap框架的前提下，只需要在您的网页中添加上面的代码，即可实现把点击 触发bootstrap下拉的事件改为鼠标滑过即触发下拉菜单。

注意：li.dropdown这个属性是你的下拉菜单中的li的样式：

                <li class="dropdown">
                    <a href="javascript:void(0)" class="dropdown-toggle"
                                        data-toggle="dropdown">管理中心</a>

                    <div class="dropdown-menu user_centor dropdown-menu-right">
                        <div class="col-md-4" role="main">
                            <dl>
                                <dt>快速通道</dt>
                                <dd>
                                    <a href="/home">我的主页</a>
                                </dd>
                                <dd>
                                    <a href="http://student.csdn.net?ref=toolbar" >关于码上中国</a>
                                </dd>
                            </dl>
                        </div>
                            <div class="col-md-4" role="main" >
                                <dl>
                                    <dt>
                                    个人中心</dt>
                                    <dd><a href="../center/manager/user">修改个人资料</a></dd>
                                    <dd><a href="../center/manager/user">账户管理</a></dd>
                                    <dd><a href="../center/manager/user">更改头像</a></dd>
                                    <dd><a href="../center/manager/user">草稿箱</a></dd>
                                    <dd><a href="../center/manager/user">我关注的人</a></dd>

                                </dl>
                            </div>
                            <div class="col-md-4" role="main" >
                                <dl>
                                    <dt>
                                    个人消息</dt>
                                    <dd>
                                        <a href=" /center/manager/collections">私信&nbsp;&nbsp;&nbsp;<span class="badge">+4</span></a>
                                    </dd>
                                    <dd>
                                        <a href=" /center/manager/collections">回复&nbsp;&nbsp;&nbsp;<span class="badge">+23</span></a>
                                    </dd>
                                    <dd>
                                        <a href=" /center/manager/collections">粉丝&nbsp;&nbsp;&nbsp;<span class="badge">+5</span></a>
                                    </dd>
                                    <dd>
                                        <a href=" /center/manager/collections">系统消息&nbsp;&nbsp;&nbsp;<span class="badge">+1</span></a>
                                    </dd>
                                    <dd>
                                        <a href=" /center/manager/collections">评论&nbsp;&nbsp;&nbsp;<span class="badge">+54</span></a>
                                    </dd>
                                </dl>
                            </div>

                    </div>
</li>

上述代码显示的效果如下：

 收藏 ( 0 )  赞 ( 0 )