javascript - Zurb 基金会 tobar 仅悬停在桌面上，但仍单击平板电脑

Question

好的，这是我的代码笔 http://codepen.io/anon/pen/epbePZ

 <li class="has-dropdown not-click">
          <a href="#">Programs</a>
          <ul class="dropdown m-menu"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li><li class="parent-link show-for-small-only"><a class="parent-link js-generated" href="#">Programs</a></li>
            <li>
              <div class="row">
                <div class="medium-4 column">
                  <h3>Undergraduate</h3>
                  <ul>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Admissions</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Academics</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Useful Contacts</a>
                    </li>
                  </ul>
                </div><!--end of .column-->
                <div class="medium-4 column">
                  <h3>Graduate</h3>
                  <ul>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Admissions</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Academics</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                    </li>
                  </ul>
                </div><!--end of .column-->
                <div class="medium-4 column">
                  <h3>Online Learning</h3>
                  <ul>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Why e-learning?</a>
                    </li><li>
                      <a href="#"><i class="icon-circle-right"></i>Studies</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Date &amp; Deadlines</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                    </li>
                    <li>
                      <a href="#"><i class="icon-circle-right"></i>Contact</a>
                    </li>
                  </ul>
                </div><!--end of .column-->
              </div><!--end of .row-->
              <div class="row">
                <div class="medium-4 column">
                  <h3>Read</h3>
                  <a href="#" class="intro">
                    <i class="icon-play"></i>
                    <img src="https://unsplash.it/400/280?image=532">
                  </a>
                </div><!--end of .column-->
                <div class="medium-4 column">
                  <h3>Build</h3>
                  <a href="#" class="intro">
                    <i class="icon-play"></i>
                    <img src="https://unsplash.it/400/280?image=534">
                  </a>
                </div><!--end of .column-->
                <div class="medium-4 column">
                  <h3>Enjoy</h3>
                  <a href="#" class="intro">
                    <i class="icon-play"></i>
                    <img src="https://unsplash.it/400/280?image=452">
                  </a>
                </div><!--end of .column-->
              </div><!--end of .row-->
            </li>
          </ul>
        </li>

下拉菜单工作正常，但是当您单击下拉菜单并将鼠标悬停在另一个下拉菜单上时，它们会重叠，我只想将其悬停在桌面上并单击平板电脑。与非点击元素有关吗？

认为这是有道理的任何帮助将不胜感激

谢谢丹

Answer 1

这可能有点令人困惑，但我遵循了一些文档，就像我确信您在这里所做的那样:http://foundation.zurb.com/docs/components/dropdown.html

我将 data-options 放在下拉列表的 a 中，类似于下面的代码。

    <li class="has-dropdown">
      <a href="#" data-options="is_hover:true; hover_timeout:0" data-dropdown="hover1">Programs</a>
      <ul id="hover1" class="dropdown m-menu" data-dropdown-content>
        <li>
          <div class="row">
            <div class="medium-4 column">
              <h3>Undergraduate</h3>
              <ul>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Admissions</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Academics</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Useful Contacts</a>
                </li>
              </ul>
            </div><!--end of .column-->
            <div class="medium-4 column">
              <h3>Graduate</h3>
              <ul>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Admissions</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Academics</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Fields of Study</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                </li>
              </ul>
            </div><!--end of .column-->
            <div class="medium-4 column">
              <h3>Online Learning</h3>
              <ul>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Why e-learning?</a
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Studies</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Date & Deadlines</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Fees and Finance</a>
                </li>
                <li>
                  <a href="#"><i class="icon-circle-right"></i>Contact</a>
                </li>
              </ul>
            </div><!--end of .column-->
          </div><!--end of .row-->
          <div class="row">
            <div class="medium-4 column">
              <h3>Read</h3>
              <a href="#" class="intro">
                <i class="icon-play"></i>
                <img src="https://unsplash.it/400/280?image=532" />
              </a>
            </div><!--end of .column-->
            <div class="medium-4 column">
              <h3>Build</h3>
              <a href="#" class="intro">
                <i class="icon-play"></i>
                <img src="https://unsplash.it/400/280?image=534" />
              </a>
            </div><!--end of .column-->
            <div class="medium-4 column">
              <h3>Enjoy</h3>
              <a href="#" class="intro">
                <i class="icon-play"></i>
                <img src="https://unsplash.it/400/280?image=452" />
              </a>
            </div><!--end of .column-->
          </div><!--end of .row-->
        </li>
      </ul>
    </li>

如果您对所有下拉项(包括包含下拉内容的 ul 标记上的 data-dropdown-content 属性)采用类似的约定，那么您应该能够在它们上获得标准的悬停效果而不重叠。