<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 測試</title> <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> <link id="theme" href="themes/hot-sneaks/jquery-ui.min.css" rel="stylesheet"> <style> body { font-family: 微軟正黑體, Arial, Helvetica, sans-serif; font-size:65%; } .ui-menu {width: 100px;} </style> </head> <body> <ul id="books" style="width: 100px;"> <li> <div>網路書店</div> <ul style="width: 80px;"> <li> <div>博客來</div> </li> <li> <div>金石堂</div> </li> <li> <div>誠品</div> </li> </ul> </li> <li> <div>圖書館</div> <ul style="width: 100px;"> <li> <div>高科大</div> </li> <li> <div>高雄市圖</div> </li> </ul> </li> </ul><br> <button id="enable-disable">Enable</button> <button id="collapseAll">collapseAll</button><br><br> <textarea id="output"></textarea> <script> $(document).ready(function(){ var config={ disabled: true, icons: {submenu: "ui-icon-circle-triangle-e"}, create: function(e, ui) { var html="觸發 create 事件 : " + $(this).val() + "\n" + $("#output").html(); $("#output").html(html); }, blur: function(e, ui) { var html="觸發 blur 事件 : " + $(this).val() + "\n" + $("#output").html(); $("#output").html(html); }, focus: function(e, ui) { var html="觸發 focus 事件 : " + $(this).val() + "\n" + $("#output").html(); $("#output").html(html); }, select: function(e, ui) { var html="觸發 select 事件 : " + $(this).val() + "\n" + $("#output").html(); $("#output").html(html); } }; $("#books").menu(config); $("#enable-disable").button(); $("#enable-disable").on("click", function() { var str=$("#enable-disable").html(); if (str=="Enable") { $("#books").menu("option", "disabled", false); //$("#books").menu("enable"); //另一個做法 $("#enable-disable").html("Disable"); } else { $("#books").menu("disable"); $("#enable-disable").html("Enable"); } }); $("#collapseAll").button(); $("#collapseAll").on("click", function() { $("#books").menu("collapseAll"); }); }); </script> </body> </html>