正文开始 <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 正则替换返回值做回调函数 | 收藏几个编辑器 |