jQuery單擊菜單有效，但在Safari和大多數移動瀏覽器中完全透明

Question

我有一個鏈接，單擊該鏈接即可顯示一個菜單。 它是為較小的瀏覽器窗口設計的，位於網站設計中的方便斷點處（ 965px ）。 這是它在不同瀏覽器中的表現方式：

Firefox（台式機），Opera（台式機），Puffin（移動版）：

• 完美運作。

Safari（台式機和移動設備），Opera Mini，Google Chrome（移動設備），Dolphin（移動設備），Mercury（移動設備），Opera by Opera（移動設備）：

• 根本不顯示-但是，如果我單擊（或點擊）菜單，然后單擊下拉菜單應在的位置，它將觸發鏈接-因此菜單就在其中，完全透明！

Google Chrome（桌面版）：

• 與上面完全一樣的透明但仍可正常運行的行為，但僅當它位於圖庫上方時，我才在頁面頂部； 當我滾動瀏覽畫廊時，它會正常顯示。

我對為什么會這樣有些困惑。 到目前為止，這似乎是CSS問題，但我似乎無法確定。 我要添加注釋，以配合下面的代碼。 我也嘗試過啟用/禁用整個圖像庫，但同樣，它沒有任何作用。

這是到目前為止的站點鏈接： http ://www.evinulrichpohl.com/trenholmetest

以下是與點擊菜單相關的一些代碼片段：

HTML：

<div id="hammenushowbio" class="viewmenu">MENU</div>
        <div id="hammenu">
            <div class="hammenulinks">
                <ul>
                    <li data-slide="2" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">FIRM PROFILE</div></li>
                    <li data-slide="3" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CLIENT SERVICES</div></li>
                    <li data-slide="4" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">OUR TEAM</div></li>
                    <li data-slide="5" onclick="document.getElementById('hammenu').style.display='none';"><div class="hamtext">CONTACT US</div></li>
                </ul>
            </div>
        </div>
</div>

CSS：

.viewmenu{
display:none;
float:right;
font-size:13px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#FFFFFF;
letter-spacing:1.5px;
cursor:pointer;
}
#hammenu{
position:fixed;
z-index:99; //enabling/disabling has no effect
width:100%; //enabling/disabling has no effect
margin-top:55px;
left:0; //enabling/disabling has no effect
}
//enabling/disabling from here downward has no effect
#hammenu:after{
content:"";
position:absolute;
display:block;
width:0;
height:0;
}
.hammenulinks{
display:inline-block;
float:left;
width:100%;
font-size:16px;
}
.hamtext{
margin-left:30px;
letter-spacing:1.5px;
}
.hammenulinks li{
background-color:#FFFFFF;
color:#1E2129;
display:block;
text-align:left;
padding-top:20px;
padding-bottom:20px;
border-bottom:1px #eeeeee solid;
}
.hammenulinks li:hover{
cursor:pointer;
background-color:#eeeeee;
}

jQuery（這似乎不是JS問題，因為我在網站上多次使用了完全相同的單擊功能，並且它們在所有台式機和移動瀏覽器中都正常工作。但是，我對JS的了解是在這一點上非常有限，所以我不能肯定地排除它）：

$(document).ready(function () {
var $slides = $('#hammenu').hide();
$('div#hammenushowbio').show().click(function () {
    var $slider = $(this).next("#hammenu");
    if (!$slider.length){
        $slider = $(this).closest("#hammenu");
    }
    $slides.not($slider).stop(true, true).slideUp();
    $slider.stop(true, true).slideToggle(0);
});
});

Mediaq（啟用或禁用無效）：

@media (max-width : 965px){
.viewmenu {
    display:inline-block;
}
#hammenu {
    display:inline-block;
}
}

@media (min-width : 966px){
#hammenu {
    display:none !important;
}
.viewmenu {
    display:none !important;
}
}

Answer 1

我非常確定“ click”事件僅是“ mouse”左鍵事件。 平板電腦，智能手機和其他基於觸摸的設備不會觸發它。 但是，它們將觸發錨標記的href中編碼的javascript。 例如：

<a href="javascript:ShowMenu();"><div class="viewmenu">MENU</div></a>

一個更優雅的替代IMO是使用jQuery Mobile插件同時支持台式機和移動設備。 擺脫MENU div周圍的定位標記，並將TAP事件直接綁定到DIV本身：

$('div.viewmenu').on('tap', function() {
    var $slider = $(this).next("#hammenu");
    if (!$slider.length){
        $slider = $(this).closest("#hammenu");
    }
    $slides.not($slider).stop(true, true).slideUp();
    $slider.stop(true, true).slideToggle(0);
});

不過請注意。 與台式機（CPU，內存等）相比，移動設備的資源往往要有限得多，因此，在使用jQuery移動插件時，只需下載所需的組件，以使javascript文件盡可能小即可。 他們在下載部分為此提供了很好的資源。 利用它。 :)

Answer 2

弄清楚了！ 現在它正在全面工作。

多虧了codingsol.com上的fastsol

我overflow:hidden; 作為我的.navigation的財產...是的...

較早的實驗下拉菜單中剩下的代碼。

為我提供不正確整理的權利！