键盘辅助功能菜单

时间:2020-01-10 11:05:08

标签: jquery html css

我认为有一段代码..子菜单无法通过键盘“ TAB”访问 我想连接这是我的WordPress主题,使用此代码时,子菜单不是(spec, sig, rest) = re.match(r'([^ \t\(]+)(\([^\(]*\))?(.*)', text).groups() 。有人可以帮忙吗?

:focus
$(function() {

  $('.menu-item-has-children a').focus( function () {
    $(this).siblings('.sub-menu').addClass('focused');
  }).blur(function(){
    $(this).siblings('.sub-menu').removeClass('focused');
  });

// For children
  $('.sub-menu a').focus( function () {
    $(this).parents('.sub-menu').addClass('focused');
  }).blur(function(){
    $(this).parents('.sub-menu').removeClass('focused');
  });
});
nav {
  font: 18px/1.7 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","MS Pゴシック",Helvetica,Sans-Serif;
  margin: 20px;
}

/* 親メニュー - Parent nav */
nav > ul > li {
  position: relative;
  float: left;
  margin-right: 45px;
}
nav a {
  color: #0bd;
  text-decoration: none;
}
nav ul a:hover {
  color: #0090aa;
}

/* 子メニュー - .sub-menu */
nav .sub-menu {
  position: absolute;
  width: 180px;
  background: #0bd;
  top: 30px;
  display: none;
}
nav .sub-menu a {
  color: #fff;
  padding: 10px 15px;
  display: block;
}
nav .sub-menu a:hover {
  color: #fff;
}

/* ホバー&フォーカスで子メニュー表示 */
/* Display sub menu by hover & focus */
nav .menu-item-has-children:hover ul,
nav .menu-item-has-children ul.focused {
  display: block;
}
nav li.menu-item-has-children li a:hover,
nav li.menu-item-has-children li a:focus {
  background: #0090aa;
}

0 个答案:

没有答案