無法讓JS定位到特定目標

Question

我不是程序員。 我可以閱讀和理解一些代碼，也可以在Google上找到答案。 但是這個逃脫了我。 我建立了一個測試頁來嘗試為移動設備編碼-http: //www.stovebolt.com/testing2.html

在800像素處，左側的導航堆棧被隱藏並被下拉菜單取代，該下拉菜單使用具有懸停功能的列表結構。 如果父級li的href為＃，這將在移動設備上起作用。 但是，您必須重新加載頁面才能使其關閉菜單。

因此，我尋求解決方案並遇到了這個問題： http : //osvaldas.info/drop-down-navigation-sensitive-and-touch-friendly

我正在使用他的DoubleTapToGo javascript，它可以工作，但它不僅適用於父級li，還適用於所有元素。 根據他的頁面，您只需要使用以下內容即可讓父項需要雙擊：

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

我沒有使用ID #nav。 我使用的是.mobile類，所以我將#nav替換為.moblie。 但是您必須雙擊所有鏈接，而不僅僅是下拉列表。

我試過否定函數，但這沒有用。 我嘗試更改為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中，類mobileParent不存在li 。 因此$( '.mobile li.mobileParent').DoubleTapToGo(); 不會工作。 添加該校准，然后使用此代碼。

Answer 2

這就是我解決問題的方式。 我刪除了所有雙擊的東西（因為它給了我錯誤），將主LI中的鏈接更改為“＃”，並在下拉菜單中添加了另一個LI以將其關閉：

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

這只是一個問題。 顯然，Apple試圖模擬懸停事件，因此它需要雙擊下拉菜單項。 因此，我在以下腳本中添加了該腳本： http : //cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices