Dropdown子菜单是一个jQuery插件,用于转换<选择>
元素和选项组组成一个多级下拉列表,这提高了可用性、SEO,并有助于使选项更容易访问。
1.下载并加载Dropdown子菜单插件的文件。
<link rel="stylesheet" href="/path/to/dropdown-submenu-dist.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dropdown-submenu.min.js"></script>
2.只需调用函数下拉子菜单
在您的选择
元素和插件将处理其余部分。
<select id="example"> <option value="">Choose your OS:</option> <optgroup label="PC"> ... </optgroup> <optgroup label="Mac"> ... </optgroup> <option value="other">Other</option> </select>
$(function(){ $("#example").dropdownSubmenu(); });
3.使用数据图标
属性
<optgroup label="Mac" data-icon="mac.png"> <option value="yosemite" data-icon="mac.png">Yosemite</option>
4.该插件还允许在选项中显示HTML内容(URL编码)。
<option value="high-sierra" data-html-option="High%20%3Cstrong%3ESierra%3C%2Fstrong%3E%20%28HTML%29">High Sierra</option>
5.自定义下拉列表的所有插件选项。
$("#example").dropdownSubmenu({ // disable the plugin when the screen size is smaller than this value minScreenWidth:500, // Watch programmatic changes watchDisabled: true, watchSelectClasses: true, watchHidden: true, watchChangeVal: false, // copy option's classes copyOptionClasses: true, // default CSS classes wrapClass: "dropdown-submenu-wrapper", tuneClass: "dropdown-submenu-skin", customClass: "", });
6.API方法。
// refresh $("#example").dropdownSubmenu('refresh'); // refresh the width $("#example").dropdownSubmenu('refresh-width'); // destroy $("#example").dropdownSubmenu('destroy');