无法让 JS 以特定的 li 为目标答案

【问题标题】：Can't get JS to target specific li无法让 JS 以特定的 li 为目标
【发布时间】：2015-08-17 03:45:53
【问题描述】：

我不是程序员。我可以阅读和理解一些代码，我可以用谷歌搜索答案。但这一个逃脱了我。我建立了一个测试页面来尝试为移动设备编码 - 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 类，因此我将 #nav 替换为 .moblie。但是您必须双击所有链接，而不仅仅是下拉菜单。

我试过否定这个函数，但是没有用。我尝试更改为 li:hasClass() 并为该 li 创建了一个新类。没用。我怎样才能让双击只在父 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>

【问题讨论】：

使用类选择器为$('.mobile li.mobileParent')....
Tushar，那没用。 $( '.mobile li.mobileParent')').DoubleTapToGo();
Sheesh，查看 html，我注意到我忽略了将类添加到 li。所以我做了。 <li class"=mobileParent"><a href="" aria-haspopup="true">Around the 'Bolt...</a> 但是低级项目还是需要双击的:-(

标签： javascript jquery-mobile menu hover

【解决方案1】：

请试试这个

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

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

【讨论】：

我刚刚这样做了，但我仍然需要双击子元素。
@PaulSchmehl $( '.mobile li.mobileParent') ... 在控制台中编写这段代码并运行它。查看是否有任何元素返回。如果它是一个空数组，则意味着没有这样的元素。
当我在控制台中运行它时，这就是我得到的。 Uncaught TypeError: $(...).DoubleTapToGo is not a function at <anonymous>:2:31 at Object.InjectedScript._evaluateOn (<anonymous>:905:140) at Object.InjectedScript._evaluateAndWrap (<anonymous>:838:34) at Object.InjectedScript.evaluate (<anonymous>:694:21)
@PaulSchmehl ... 仅运行 $( '.mobile li.mobileParent')
好的。我尝试了两种方式。这就是我运行那条线的原因。 Uncaught TypeError: $(...).DoubleTapToGo is not a function at <anonymous>:2:31 at Object.InjectedScript._evaluateOn (<anonymous>:905:140) at Object.InjectedScript._evaluateAndWrap (<anonymous>:838:34) at Object.InjectedScript.evaluate (<anonymous>:694:21)

【解决方案2】：

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

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

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

【讨论】：