javascript - 单击而不是悬停访问无限下拉菜单

Question

不久前，我在 Internet 上搜索了众多 CSS 无限下拉菜单之一，但我发现只有一个足够灵活和简单，可以由不喜欢 CSS 的人实现:

a, a:link, a:visited {
        color: #888 !important;
        text-decoration: none;
    }
    /**
     * Infinitely nestable dropdown menu by @csswizardry
     * twitter.com/csswizardry
     *
     * Throw any `ul` or `ol` into horizontal mode, as per csswizardry.com/2011/09/the-nav-abstraction
     *
     * <ul class=nav>
     *   <li><a href=/>Home</a></li>
     *   <li><a href=/about>About</a></li>
     *   <li><a href=/portfolio>Portfolio</a></li>
     *   <li><a href=/contact>Contact</a></li>
     * </ul>
     */
    .nav {
        display: inline !important;
        list-style: none;
        margin-left: 0;
    }
    
        .nav > li, .nav > li > a {
           display: inline;
           zoom: 1;
        }
    
            .nav li li a:hover {
                color: #B20000 !important;
            }
    
        /**
         * Create a vertically stacked nav by extending `.nav` with `.stacked`.
         *
         * <ul class="nav stacked">
         *   <li><a href=/>Home</a></li>
         *   <li><a href=/about>About</a></li>
         *   <li><a href=/portfolio>Portfolio</a></li>
         *   <li><a href=/contact>Contact</a></li>
         * </ul>
         */
        .stacked > li {
            display: list-item !important;
            margin-right: 7px;
        }
    
            .stacked > li > a {
                display: block;
            }
    
    /**
     * Flyouts are pieces of content that fly out of a parent when said parent is hovered.
     * They typically appear bottom-left of the parent.
     *
     * <div class=flyout>
     *   Foo
     *   <div class=flyout-content>
     *     <h1>Lorem</h1>
     *     <p>Ipsum</p>
     *   </div>
     * </div>
     */
    .flyout,
    .flyout-alt {
        cursor: pointer;
        margin-right: 0.4rem;
        position: relative;
    }
    
        .flyout-content {
            /* Position the flyouts off-screen. This is typically better than `display:none;`. */
            position: absolute;
            top: 100%;
            left: -99999px;
    
            /**
             * Even though they are out of document flow, lots of nested flyouts can
             * eventually force scrollbars to appear as they become taller than the viewport.
             * We can undo this effect by giving them zero height.
             */
    
            height: 0;
            overflow: hidden;
        }
    
        /**
         * Bring the flyouts into view when you hover their parents.
         * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’ (`.flyout-alt`).
         */
        /* Regular flyouts sit all the way from the top, flush left. */
        .flyout:hover > .flyout-content {
            left: 0;
        }
    
        /* Alternative flyouts sit all the way from the left, flush top. */
        .flyout-alt:hover > .flyout-content {
            top: 0;
            left: 100%;
        }
    
        .flyout:hover > .flyout-content,
        .flyout-alt:hover > .flyout-content{
            /* Give the flyouts their height back once they come into view. */
            height: auto;
            overflow: visible;
        }
    
          .flyout.flyout-right:hover > .flyout-content,
          .flyout-alt.flyout-right:hover > .flyout-content{
              left: auto;
              right: 0;
          }
    
        /**
         * Site nav specific flyouts, an extension of `.flyout`.
         * Set up some styles to apply and persist when we hover things in the site nav.
         * This allows us to keep parents highlighted as we hover their contained flyouts [1].
         */
        .nav .flyout-content {
            /*background-color: #292b2c;*/
            background-color: #FFF;
            background-clip: padding-box;
            border: 1px solid rgba( 0, 0, 0, .15 );
            border-radius: .25rem;
            /*color: rgba( 255,255,255, .5 );*/
            color: #292b2c;
            font-size: 1rem;
            margin: .125rem 0 0;
            padding: .5rem 0;
            z-index: 1000;
        }
    
            .nav .flyout-content li {
                font-size: .9rem;
                padding: 0 0.8rem 0 1.2rem;
                white-space: nowrap;
            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

        
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">

<h1 class="navbar-brand text-left">
      <a href="#">Brand</a>
    </h1>
    
    <div class="collapse navbar-collapse" id="navigation">
    
      <div class="navbar-nav">
    
        <ul class="nav">
    
          <li class="flyout">
    
            <a class="nav-link dropdown-toggle">
              Group #1
            </a>
    
            <ul class="flyout-content nav stacked">
    
              <li>
                <a href="#">
                  Entry #1
                </a>
              </li>
    
              <li>
                <a href="#">
                  Entry #2
                </a>
              </li>
    
              <li>
                <a href="#">
                  Entry #3
                </a>
              </li>
    
              <li>
                <a href="#">
                  Entry #4
                </a>
              </li>
    
              <li class="flyout-alt">
    
                <a>
                  Sub-entry #1
                </a>
    
                <ul class="flyout-content nav stacked">
    
                  <li>
                    <a href="#">
                      Sub-entry #2
                    </a>
                  </li>
    
                  <li>
                    <a href="#">
                      Sub-entry #3
                    </a>
                  </li>
    
                  <li>
                    <a href="#">
                      Sub-entry #4
                    </a>
                  </li>
    
                  <li>
                    <a href="#">
                      Sub-entry #5
                    </a>
                  </li>
    
                  <li>
                    <a href="#">
                      Sub-entry #6
                    </a>
                  </li>
    
                  <li>
                    <a href="#">
                      Sub-entry #7
                    </a>
                  </li>
    
                </ul>
    
              </li>
    
            </ul>
    
          </li>
    
          <li class="flyout">
    
            <a class="dropdown-toggle">Group #2</a>
    
            <ul class="flyout-content nav stacked">
    
              <li>
                <a href="#">Entry #1</a>
              </li>
    
              <li>
                <a href="#">Entry #2</a>
              </li>
    
              <li>
                <a href="#">Entry #3</a>
              </li>
    
              <li>
                <a href="#">Entry #4</a>
              </li>
            </ul>
    
          </li>
    
        </ul>
    
      </div>
    
      <div class="navbar-nav ml-auto pull-right hidden-sm-down" id="languages">
    
        <ul class="nav">
    
          <li class="flyout flyout-right">
    
            <a class="dropdown-toggle" href="/">
              <img src="https://i.imgur.com/oPIkeF1.gif" alt="English" />
              English
              <span class="glyphicon glyphicon-chevron-down"></span>
            </a>       
    
            <ul class="flyout-content nav stacked">
    
              <li>
                
                <a href="/">
                
                  <img src="https://i.imgur.com/oPIkeF1.gif" alt="English" />
                  English
                </a>
              </li>
    
              <li>
                  <a href="/pt">
                    <img src="https://i.imgur.com/AnKluc7.gif" alt="Portuguese" />
                    Portuguese
                  </a>
                </li>
    
                <li>
                  <a href="/es">
                    <img src="https://i.imgur.com/4XI5r0w.gif" alt="Spanish" />
                    Spanish
                  </a>
                </li>
    
                <li>
                  <a href="/it">
                    <img src="https://i.imgur.com/tSsnFZT.gif" alt="Italian" />
                    Italian
                  </a>
                </li>
    
            </ul>
    
          </li>
    
        </ul>
    
      </div>
    
    </div></nav>

The inline editor is not working (again) so I made a Fiddle as well.

如果您将鼠标悬停在正确的菜单上几次(问题最明显的地方)，您可能会感觉到在打开弹出窗口而不让其关闭时瞄准其中一个小标志是多么有压力。

我尝试通过增加填充和更改位置来解决此问题，以便弹出内容(白色面板)更接近带有 :hover 的元素，但它仍然会导致糟糕的体验。

所以，长话短说，我怎么能在点击时触发这些 :hover，就像在移动设备中一样？

我读到过关于隐藏复选框的黑客攻击，但我无法让它发挥作用。

我不介意是否需要 jQuery，它已经被用于其他用途，但使用纯 CSS 会更好，因为我正试图减少为 AMP 准备网站的依赖性。

Answer 1

<a class="nav-link dropdown-toggle">Group #1</a>

<a class="dropdown-toggle">Group #2</a>

添加 nav-link class到第 2 组链接，情况明显改善。