<!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 關注
- 5057 瀏覽
添加回答
舉報
0/150
提交
取消