簡體   English   中英

Wordpress 移動導航菜單:在 iPhone 和其他移動設備上單擊時會出現菜單,但在 iPad 上不會出現

[英]Wordpress mobile nav menu: menu appears on click on iPhone and other mobile devices, but not iPad

我想弄清楚為什么這個響應式菜單在 iPhone 和其他平板電腦上可以正常工作,但在 iPad 上卻不能。 在手機上,當點擊菜單圖標時,菜單被激活並正確下拉。 但是,在 iPad 上,單擊菜單圖標時沒有任何反應。

這是相關的html:

<a href="#" class="nav-toggle" aria-hidden="false">Menu</a>
<nav id="nav" class="nav-collapse closed" aria-hidden="true" style="transition: max-height 250ms; position: absolute;">
  <ul id="topnav" class="menu"><li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item no-children menu-item-104">
    <a href="http://bigdogpyro.geeksweet.com/">Home</a></li>
   ...
  </ul></nav>

當通過瀏覽器開發者工具(通過切換設備模式)查看這個時,作為手機,當點擊菜單圖標時,它將 ul 標簽中的“關閉”類更改為“打開”(然后下拉菜單出現),但是,作為平板電腦,類不會改變。 (我正在使用開發人員工具在 Mac 上的 Chrome 中對此進行測試 - 它通常在平板電腦上顯示此問題,盡管該問題似乎特定於 iPad。)

所以,我猜這是一個 javascript 問題,但我不確定如何從這里進行故障排除——我對 javascript 的處理不是那么好,而且 Wordpress 主題中的源 javascript 文件被縮小和困難解析。

但是,如果有幫助,這里是頁面頁腳中包含的腳本:

<script>
    var navigation = responsiveNav(".nav-collapse", { 
        label: "Menu", // String: Label for the navigation toggle
        insert: "before", // String: Insert the toggle before or after the navigation
    });
</script>
<script>jQuery(document).ready(function($)   
{$('.expander').simpleexpand({'defaultTarget': '.sub-menu'});});

有誰知道為什么會發生這種情況?

我剛剛在我相當老的三星 Tab 7.0 (Jellybean) 以及我的 Sony Z3 Compact Tablet (Lollipop) 上測試了您的網站(代碼中的鏈接) http://bigdogpyro.geeksweet.com/ 我檢查了本機瀏覽器、Firefox Mobile 和 Chrome。

移動菜單沒有任何問題,效果很好。

您的問題是您的測試平台所獨有的。 我建議您更改問題以反映您的測試平台。 你也可以谷歌平台特定的怪癖(IOS有很多)。

好的——我開始一個一個地策略性地停用 Wordpress 插件,看看它是否影響了任何東西——我通過停用一個名為“滾動上的粘性菜單(或任何東西!)”的插件來解決這個問題,該插件將元素粘貼到頂部滾動頁面。

我不太確定它是如何影響菜單的,因此在點擊時它不會出現(或者為什么它只發生在 iPad 上),但我很高興我偶然發現了答案。

我打算刪除我的問題,因為我不知道這個解決方案是否一定會幫助其他人,特別是因為我不太確定插件是如何搞砸的......但是,它給了我一條警告信息刪除問題,所以我想我會留下足夠的單獨。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM