Question

Zurb基金会有一个选项可以让你无法自拔。

以下是添加此选项的他们的代码示例：http://foundation.zurb.com/docs/components/top-bar.html#clickable

或者这是代码： <nav class="top-bar" data-options="is_hover:false">

我在我的代码中有这个，但菜单仍然可以保持可用性。我想知道为什么。

这是我的菜单代码（抱歉，它是如此混乱 - 顺便说一下，这是生成的代码 - 如果你想在模板中使用代码，那就在这个代码示例之后：

任何帮助将不胜感激。

顺便说一下，如果我的问题遗漏了任何信息，或者不清楚，请告诉我。

谢谢。

  <!-- Navigation -->
  <div class="contain-to-grid">
          <nav class="top-bar" data-options="is_hover:false">
            <ul class="title-area">
              <li class="name"><!-- Leave this empty --></li>
          <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
        </ul>
  <section class="top-bar-section">
       <ul class="nav menu left">
<li class="item-101 current active">
    <a href="/social/services/" >Home</a></li>
<li class="item-106 deeper parent">
   <a class="programs" href="/social/services/index.php/programs-services" >Programs &amp; Services</a>

<ul class="nav-child unstyled small">
  <li class="item-112">
    <a href="/social/services/index.php/programs-services/children-family" >Children &amp; Family</a></li>
   <li class="item-114"><a href="/social/services/index.php/programs-services/senior-services" >Senior Services</a></li>
   <li class="item-115"><a href="/social/services/index.php/programs-services/support-groups" >Support Groups</a></li>
    <li class="item-113"><a href="/social/services/index.php/programs-services/counseling" >Counseling</a></li>
   </ul></li>
    <li class="item-108 deeper parent">
      <a href="/social/services/index.php/news" >News</a><ul class="nav-child unstyled small">
     <li class="item-126">
      <a href="/social/services/index.php/news/ltsc-news" >LTSC News</a></li>
      </ul></li>
       <li class="item-109 deeper parent">
         <a href="/social/services/index.php/resources" >Resources</a><ul class="nav-child unstyled small">
       <li class="item-102"><a href="/social/services/index.php/resources/testing" >Testing</a></li><li class="item-125">
          <a href="/social/services/index.php/resources/children-family" >Children &amp; Family</a></li></ul></li>
        <li class="item-116"><a href="/social/services/index.php/get-involved" >Get Involved</a></li>
         <li class="item-111"><a href="/social/services/index.php/contact-us" >Contact Us</a></li>
        <li class="item-117 deeper parent"><a href="/social/services/index.php/calendar" >Calendar</a>
        <ul class="nav-child unstyled small">
            <li class="item-123"><a href="/social/services/index.php/calendar/upcoming-events" >Upcoming Events</a></li>
          <li class="item-124"><a href="/social/services/index.php/calendar/past-events" >Past Events</a></li>
              </ul></li></ul>

  </section>
            </nav>
 </div>

  <!-- End Navigation -->

这是模板中的代码（即，不是如上生成的）

  <!-- Navigation -->
  <div class="contain-to-grid">
          <nav class="top-bar" data-options="is_hover:false">
            <ul class="title-area">
              <li class="name"><!-- Leave this empty --></li>
          <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
        </ul>
  <section class="top-bar-section">
       <jdoc:include type="modules" name="menu2" style="none" />    
  </section>
            </nav>
 </div>

  <!-- End Navigation -->

Answer 1

你在基金会5.0吗？他们最近改变了它的工作原理和can be found in their upgrading documentation。

在Foundation 4.0中，您可以使用此javascript删除它：

$(document).foundation('dropdown', {is_hover: false});

但是在新的Foundation 5.0中你需要使用它：

$(document).foundation({dropdown: {is_hover: false}});

试图让菜单不可动摇

1 个答案: