Question

我正在尝试在父项目上选项卡时显示子导航，然后在选项卡或移动+跳出子菜单时隐藏。

这是我的JS。我有第一个和最后一个声明工作，但不能得到最后一个。我做错了什么？

// Show Child Navigation
    jQuery('.has-child, .currenthas-child').keydown( function(e) {
        if (e.keyCode == 9 && !e.shiftKey) {
          	jQuery(this).children().show();
        }
    });
    
    
    //SHIFT + TAB BUTTON
    jQuery('.submenu li:first-child').keydown( function(e) {
        if (e.keyCode == 9 && e.shiftKey) {
          	jQuery(this).parent().hide();
          	console.log("tab first");
        }
    });
    
    //TAB BUTTON
    jQuery('.submenu li:last-child').keydown( function(e) {
        if (e.keyCode == 9 && !e.shiftKey) {
          	jQuery(this).parent().hide();
         	console.log("tab last");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
        <button class="menu-toggle" aria-label="Navigation menu"></button>
        <ul class="menu">
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu" style="display: block;">
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                </ul>
            </li>
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu" style="display: none;">
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                </ul>
            </li>
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu">
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                </ul>
            </li>
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu">
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                </ul>
            </li>
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu">
                    <li><a href="#">Menu Item</a></li>
                </ul>
            </li>
        </ul>
    </nav>

Answer 1

这样的东西？

[_{具有子子菜单并在显示当前时隐藏兄弟姐妹。要隐藏兄弟姐妹，只需在.end()事件}]中li.keydown后删除代码

＆＃13;

/*  Here i simply assign each event to a variable for easy implimintation.  */
var myEvents = {
  click: function(e) {
    jQuery(this).children('ul').show().end().siblings('li').find('ul').hide();
  },
  keydown: function(e) {
    e.stopPropagation();
    if (e.keyCode == 9) {
      
      if (!e.shiftKey && jQuery('nav li').index(jQuery(this)) == (jQuery('nav li').length-1)) jQuery('nav li:first').focus();
      else if (e.shiftKey && jQuery('nav li').index(jQuery(this)) === 0) jQuery('nav ul:first > li:last').focus().blur();
    }
  },
  keyup: function(e) {
    e.stopPropagation();
    if (e.keyCode == 9) {
      if (myEvents.cancelKeyup) myEvents.cancelKeyup = false;
      else myEvents.click.apply(this, arguments);
    }
  }
}
jQuery(document)
  .on('click', 'li', myEvents.click)
  .on('keydown', 'li', myEvents.keydown)
  .on('keyup', 'li', myEvents.keyup)

//  this is needed to keep tabbing focus correct
jQuery('nav li').each(function(i) { this.tabIndex = i; });

/* Below is simply for making menus with sub menues more noticable  */
jQuery('li').each(function(i) { if (jQuery(this).children('ul').length) jQuery(this).addClass('highlight'); });

＆＃13;

li ul { display: none; }
.highlight > a { background: yellow; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
        <button class="menu-toggle" aria-label="Navigation menu">Button</button>
        <ul class="menu">
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu">
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li>
                      <a href="#">Menu Item</a>
                      <ul class="submenu">
                        <li><a href="#">Menu Item</a></li>
                        <li><a href="#">Menu Item</a></li>
                        <li>
                          <a href="#">Menu Item</a>
                          <ul class="submenu">
                            <li><a href="#">Menu Item</a></li>
                            <li><a href="#">Menu Item</a></li>
                            <li><a href="#">Menu Item</a></li>
                            <li><a href="#">Menu Item</a></li>
                          </ul>
                        </li>
                        <li><a href="#">Menu Item</a></li>
                        <li><a href="#">Menu Item</a></li>
                      </ul>
                    </li>
                </ul>
            </li>
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu">
                    <li><a href="#">Menu Item</a></li>
                    <li>
                      <a href="#">Menu Item</a>
                      <ul class="submenu">
                        <li><a href="#">Menu Item</a></li>
                        <li><a href="#">Menu Item</a></li>
                        <li><a href="#">Menu Item</a></li>
                        <li><a href="#">Menu Item</a></li>
                      </ul>
                    </li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                </ul>
            </li>
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu">
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                </ul>
            </li>
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu">
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                    <li><a href="#">Menu Item</a></li>
                </ul>
            </li>
            <li class="has-child">
                <a href="#">Menu Item</a>
                <ul class="submenu">
                    <li><a href="#">Menu Item</a></li>
                </ul>
            </li>
        </ul>
    </nav>

＆＃13;

jQuery选项卡和shift + tab显示导航

1 个答案: