jQuery工作碰到的

<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>
View Code

 https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element

<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>
View Code

 expand false

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")
      }
    }
  }
}
View Code

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

原文地址:https://www.cnblogs.com/tabCtrlShift/p/5610402.html