Bootstrap鼠标经过显示菜单的方法

正文开始

<p>Bootstrap鼠标经过显示菜单的方法,无须脚本,只需以下简化操作。</p><p>原代码</p><p> <br /><div class="dropdown"><br />    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题<br />        <span class="caret"></span><br />    </button><br />    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><br />        <li role="presentation"><br />            <a role="menuitem" tabindex="-1" href="#">Java</a><br />        </li><br />        <li role="presentation"><br />            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a><br />        </li><br />        <li role="presentation"><br />            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a><br />        </li><br />        <li role="presentation" class="divider"></li><br />        <li role="presentation"><br />            <a role="menuitem" tabindex="-1" href="#">分离的链接</a><br />        </li><br />    </ul><br /></div><br /><br /><br /></p><p>1.去掉各种 id data role 防止触发bootstrap内部事件</p><p>2.给dropdown加个外层包裹。</p><p> 如下代码</p><p><div class="hover_box"><br />    <div class="dropdown"><br />        <button type="button" class="btn dropdown-toggle">主题<br />            <span class="caret"></span><br />        </button><br />        <ul class="dropdown-menu"><br />            <li><br />                <a tabindex="-1" href="#">Java</a><br />            </li><br />            <li><br />                <a tabindex="-1" href="#">数据挖掘</a><br />            </li><br />            <li><br />                <a tabindex="-1" href="#">数据通信/网络</a><br />            </li><br />            <li class="divider"></li><br />            <li><br />                <a tabindex="-1" href="#">分离的链接</a><br />            </li><br />        </ul><br />    </div><br /></div></p><p><br /></p><p>css加 外层高度加大、鼠标经过样式 即可</p><p>.hover_box { display: inline-block; height: 36px;}<br /></p><p>.hover_box:hover .dropdown-menu { display: block; }<br /></p>

正文结束

js 正则替换返回值做回调函数 收藏几个编辑器