顶部栏中的下拉菜单在触发前在鼠标按下时关闭 link

Question

我有一个顶部栏，其中包含一个下拉菜单，其中 link 用于当前用户的帐户（例如仪表板、注销等）。每个菜单项都包含一个指向相对 URL.

的 link

打开菜单没问题，但我一点击某个项目，菜单就关闭了，什么也没有发生。

我一直在寻找 click 和 mousedown 事件处理程序，但找不到任何看起来会导致此问题的东西。

有人对此有想法吗？

这是相关的 HTML 代码：

<div class="contain-to-grid nav-wrapper">
   <nav data-topbar="data-topbar" role="navigation" class="top-bar">
      <ul class="title-area">
         <li class="name">
            <h1><a href="/">Site name</a></h1>
         </li>
      </ul>
      <section data-hook="user-info" class="top-bar-section">
         <ul class="right">
            <li class="has-dropdown">
               <a href="#" data-hook="account-menu" class="external-link">username</a>
               <ul class="dropdown">
                  <li><a href="/app/dashboard">Dashboard</a></li>
                  <li><a href="/auth/logout" class="external-link">Sign out</a></li>
               </ul>
            </li>
         </ul>
      </section>
      <section class="top-bar-section">
         <ul class="right">
            <li><a href="/features">Link 1</a></li>
            <li><a href="/pricing">Link 2</a></li>
            <li><a href="/support">Link 3</a></li>
         </ul>
      </section>
   </nav>
</div>

及其fiddle：https://jsfiddle.net/a3qrhg5a/

Answer 1

你可能只是忘了包含 jQuery 并初始化 Foundation JS

例如：

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation/foundation.js"></script>

    <script>
      $(document).foundation();
    </script>

这是你的fiddle。固定的： https://jsfiddle.net/bartholomej/nxgjqtw4/5/

顶部栏中的下拉菜单在触发前在鼠标按下时关闭 link

Dropdown menu in top bar closes on mousedown before firing link

zurb-foundation