Question

我在网站上工作时遇到移动视图导航问题。我正在使用这个插件：http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly。在加载父链接之前，应该连续两次点击，只需点击一下即可显示子链接。当我有一个只有插件和徽标的空白页面时，该插件可以很好地工作。

当我尝试在导航和徽标所在的行上方添加任何内容时会出现问题。当我在其上方添加任何其他内容时，单击父链接会打开其上方的父链接2的下拉列表。例如，当我点击导航中的“工作坊”时，“新闻”下的下拉菜单会打开。这仅在实际设备上预览时才会发生，在这种情况下，在iOS7上。

如果我只有这个作为我的HTML标记，它可以工作：

<div class="row">
<div class="small-9 medium-5 large-4 columns" id="logo">    <a href="index.php"><img src="http://192.185.122.20/~aljlaw/images/pageLayout/JalozaA-banner.svg" alt="Jaloza &amp; Associates" title="Jaloza &amp; Associates"></a>

</div>
<div class="small-3 medium-12 large-8 columns">
    <nav id="nav" role="navigation">    <a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>

        <ul>
            <li><a href="index.php" title="Home" aria-haspopup="false">Home</a>

            </li>
            <li><a href="Practice-Areas.php" aria-haspopup="true">Practice Areas</a>

                <ul>
                    <li><a href="Estate-Planning.php">Estate Planning Fundamentals</a>

                    </li>
                    <li><a href="Elder-Law.php">Long-Term Care Planning/Medicaid</a>

                    </li>
                    <li><a href="Veterans-Aid-Attendance.php">Veterans Benefits</a>

                    </li>
                    <li><a href="Probate.php">Probate &amp; Estate Administration</a>

                    </li>
                    <li><a href="Charitable-Planning.php">Charitable Planning</a>

                    </li>
                    <li><a href="Special-Needs-Planning.php">Special Needs Planning</a>

                    </li>
                    <li><a href="Estate-Tax-Planning.php">Estate Tax Planning</a>

                    </li>
                    <li><a href="Business-Planning.php">Business Succession Planning</a>

                    </li>
                    <li><a href="Medicaid-Planning.php">Medicaid Crisis Planning</a>

                    </li>
                    <li><a href="Asset-Protection.php">Asset Protection</a>

                    </li>
                </ul>
            </li>
            <li><a href="Estate-Planning-newsletters.php" aria-haspopup="true">News</a>

                <ul>
                    <li><a href="Estate-Planning-newsletters-Archive.php">Index &amp; Archive</a>

                    </li>
                </ul>
            </li>
            <li><a href="Estate-Planning-Consult.php" aria-haspopup="true">Becoming a Client</a>

                <ul>
                    <li><a href="Estate-Planning-Consult-Form.php">Request a Consultation</a>

                    </li>

                    <li><a href="Financial-Professionals.php">For Professional Advisors</a>

                    </li>
                    <li><a href="Estate-Planning-FAQ.php">FAQ</a>

                    </li>
                </ul>
            </li>
            <li><a href="Estate-Planning-workshops.php" aria-haspopup="true">Workshops</a>

                <ul>
                    <li><a href="Estate-Planning-workhops-Registration.php">Workshop Registration</a>

                    </li>
                </ul>
            </li>
            <li><a href="about-Us.php" aria-haspopup="true">About</a>

                <ul>
                    <li><a href="aboutUs-Andrew-Jaloza.php">Andrew Jaloza</a>

                    </li>
                </ul>
            </li>
            <li><a href="Contact-Us.php" aria-haspopup="false">Contact</a>

            </li>
        </ul>
    </nav>
</div>

但在该行之前添加任何内容都会导致问题。这是一个查看示例的jsfiddle：http://jsfiddle.net/t4YE5/

我在这里遇到了关于doubletaptogo问题的其他问题/答案，但他们似乎都没有同样的问题。提前感谢您的任何帮助或建议！

Answer 1

谢谢，我想我已经明白了。我将整个标头包装在一个仅为移动设备绝对定位的div中。不知道为什么，但那确实有效。

所以看起来像这样：

<div id="header">
     <div id="header-wrapper">
       <!--Logo code-->
       <!--Navigation code-->
     </div>
</div>

我添加的CSS是：

#header-wrapper {position:relative;}
@media only screen and ( max-width: 40em ) /* small */ {
    #header-wrapper{position: absolute;}
}

Answer 2

你添加了jquery：

   <script type="text/javascript">
    $(function () {
        $('#nav li:has(ul)').doubleTapToGo();
        });
  </script>

Answer 3

一直试图弄明白这一点......

原来，doubletaptogo.js仅在导航位于页面顶部且无法解决时才起作用;如果导航低于任何其他内容，如标题等，请忘记使用此脚本，因为它总是会导致导航跳转到页面顶部。

Doubletaptogo响应菜单无法在手机上工作

3 个答案: