<!doctype html><html><head> <meta charset="UTF-8"> <title>图标菜单按钮组件</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <script src="./js/jquery.min.js"></script> <script src="./js/bootstrap.min.js"></script></head><body> <!-- 建议使用i和span标签 --> <div> <button class="btn btn-default">下拉菜单</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span></span> </button> <ul> <li>网站导航</li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">广粤</a></li> </ul> </div></body></html>
2 回答
幕布斯7574896
TA贡献38条经验 获得超3个赞
已采纳的答案是有问题的，鼠标移入时会让类名为dropdown-menu的元素都显示出来，而不是只是当前dropdown-toggle对应的dropdown-menu显示出来。bootstrap已经帮你提供了api的：
$().dropdown('toggle')那么相应的代码应该是:
$(function() {
$(".dropdown-toggle").on("mouseover", function() {
$(this).dropdown('toggle');
})
$(".dropdown-toggle").on("mouseout", function() {
$(this).dropdown('toggle');
})
})
- 2 回答
- 0 关注
- 4979 浏览
添加回答
举报
0/150
提交
取消