![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<a aria-expanded="true" id="TLink1" href="#" onclick="toggle('navbar', 'TLink1')">Toggle Navigation Bar 1</a> <ul style="" id="navbar"> <li><a href="http://example.com/target1.html">Link 1</a></li> <li><a href="http://example.com/target2.html">Link 2</a></li> <li><a href="http://example.com/target3.html">Link 3</a></li> <li><a href="http://example.com/target4.html">Link 4</a></li> </ul> <style type="text/css" media="screen"> #navbar li, #navbar2 li { display: inline; list-style-type: none; padding-right: 20px; } </style> <script type="text/javascript"> function toggle(id, id2) { var n = document.getElementById(id); if (n.style.display != 'none') { n.style.display = 'none'; document.getElementById(id2).setAttribute('aria-expanded', 'false'); } else { n.style.display = ''; document.getElementById(id2).setAttribute('aria-expanded', 'true'); } } </script>
https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<li class="light-blue"> <a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"> <!-- <img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo" /> --> <span class="user-info"> <small>上午好,</small> 中徽管理员 </span> <i class="ace-icon fa fa-caret-down"></i> </a> <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close"> <li> <a href="/platform/change_password"> <i class="ace-icon fa fa-user"></i> 修改密码 </a> </li> <li class="divider"></li> <li> <a href="/logout"> <i class="ace-icon fa fa-power-off"></i> 退出 </a> </li> </ul> </li>
expand false
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
g.prototype.toggle = function(d) { var e = a(this); if (!e.is(".disabled, :disabled")) { var f = c(e), g = f.hasClass("open"); if (b(), !g) { "ontouchstart" in document.documentElement && !f.closest(".navbar-nav").length && a('<div class="dropdown-backdrop"/>').insertAfter(a(this)).on("click", b); var h = { relatedTarget: this }; if (f.trigger(d = a.Event("show.bs.dropdown", h)), d.isDefaultPrevented()) return; e.trigger("focus").attr("aria-expanded", "true"), f.toggleClass("open").trigger("shown.bs.dropdown", h) } return !1 } } g.prototype.keydown = function(b) { if (/(38|40|27|32)/.test(b.which) && !/input|textarea/i.test(b.target.tagName)) { var d = a(this); if (b.preventDefault(), b.stopPropagation(), !d.is(".disabled, :disabled")) { var e = c(d), g = e.hasClass("open"); if (!g && 27 != b.which || g && 27 == b.which) return 27 == b.which && e.find(f).trigger("focus"), d.trigger("click"); var h = " li:not(.divider):visible a", i = e.find('[role="menu"]' + h + ', [role="listbox"]' + h); if (i.length) { var j = i.index(b.target); 38 == b.which && j > 0 && j--, 40 == b.which && j < i.length - 1 && j++, ~j || (j = 0), i.eq(j).trigger("focus") } } } }
navbar
function(b) { var c = a(this), d = a(c.attr("data-target")); if (0 != d.length) { b.preventDefault(), d.toggleClass("display"), c.toggleClass("display"); var e = ace.click_event + ".ace.autohide", f = "true" === d.attr("data-auto-hide"); return c.hasClass("display") ? (f && a(document).on(e, function(b) { return d.get(0) == b.target || a.contains(d.get(0), b.target) ? void b.stopPropagation() : (d.removeClass("display"), c.removeClass("display"), void a(document).off(e)) }), "true" == d.attr("data-sidebar-scroll") && d.ace_sidebar_scroll("reset")) : f && a(document).off(e), !1 } }
sidebar