Question

我不是程序员。我可以阅读并理解一些代码，我可以谷歌寻求答案。但是这个逃脱了我。我构建了一个测试页面，试着为移动设备编写代码 - http://www.stovebolt.com/testing2.html

在800像素处，左侧的导航堆栈被隐藏，并替换为使用带有悬停功能的列表结构的下拉菜单。如果父li的href为＃，这将适用于移动设备。但是，您必须重新加载页面才能关闭菜单。

所以我投出了一个解决方案并遇到了这个问题：http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

我正在使用他的DoubleTapToGo javascript，它有效，但它适用于所有元素，而不仅仅是父li。根据他的页面，你只需要使用以下内容只让父母需要双击：

$( '#nav li:has(ul)' ).doubleTapToGo();

我没有使用id #nav。我使用的是.mobile类，所以我用.moblie替换了#nav。但是你必须双击所有链接，而不仅仅是下拉列表。

我试过否定这个功能，但那并没有奏效。我尝试改为li：hasClass（）并为那个li创建了一个新类。没有工作。如何让doubleclick只能在父li上工作？代码li：has（ul）应该有效，因为只有一个子列表。但它没有。

我无法帮助，但我认为我错过了一些非常简单的事情。这是我页面上的代码，我直接从他的网页来源复制了这些代码：

<script>
    $( function()
    {
            $( '.mobile li:hasClass('mobileParent')').DoubleTapToGo();
    });

这是移动列表的html：

<div class="mobile" role="navigation">
<ul>
<li><a href="<!--#echo var="DOCUMENT_URI" -->" aria-haspopup="true">Around the 'Bolt...</a>
<ul>
<li><a href="http://www.stovebolt.com/">Home</a></li>
<li><a href="http://www.stovebolt.com/search.html">Search</a></li>
<li><a href="http://www.stovebolt.com/ubbthreads/ubbthreads.php">Discussion Forums</a></li>
<li><a href="http://www.stovebolt.com/gallery">Gallery</a></li>
<li><a href="http://www.stovebolt.com/techtips/">Tech Tips</a></li>
<li><a href="http://www.stovebolt.com/links">Links</a></li>
<li><a href="http://www.stovebolt.com/events">Events</a></li>
<li><a href="http://www.stovebolt.com/ubbthreads/ubbthreads.php/category/3/Swap_Meet.html">Swap Meet</a></li>
<li><a href="http://www.stovebolt.com/faq/">FAQs</a></li>
<li><a href="http://www.stovebolt.com/features">Features</a></li>
<li><a href="http://www.cafepress.com/mystovebolt" target="_blank">Stovebolt Hoo-ya</a></li>
<li><a href="http://www.stovebolt.com/office">Stovebolt Office</a></li>
</ul>
</li>
</ul>
</div>

Answer 1

请尝试此

$( function()
{
        $( '.mobile li.mobileParent').DoubleTapToGo();
});

但是在你的HTML中，li没有类mobileParent。所以$( '.mobile li.mobileParent').DoubleTapToGo();不会工作。添加该calss然后使用此代码。

Answer 2

这就是我解决问题的方法。我撕掉了所有的双击内容（因为它给了我错误），将主要LI中的链接更改为“＃”并将另一个LI添加到下拉菜单中以关闭它：

<li><a href="#" aria-haspopup="true">Around the 'Bolt...</a> <ul> <li><a href="">Close this Menu</a></li>

这只留下了一个问题。显然，Apple会尝试模拟悬停事件，因此需要双击下拉菜单项。所以我添加了这个脚本：http://cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices

无法让JS针对特定的li

2 个答案: