javascript - Jquery 点击菜单可以工作，但在 Safari 和大多数移动浏览器中完全透明

Question

我有一个链接，单击该链接后会显示一个菜单。它专为较小的浏览器窗口而设计，位于网站设计中方便的断点处 (965px)。以下是它在不同浏览器中的表现:

Firefox(桌面)、Opera(桌面)、Puffin(移动):

• 完美运行。

Safari(桌面和移动)、Opera Mini、Google Chrome(移动)、Dolphin(移动)、Mercury(移动)、Coast by Opera(移动):

• 根本不显示 - 但是，如果我点击(或点击)菜单，然后点击下拉菜单应该在的位置，它会触发链接 - 所以菜单就在那里，只是完全透明!

谷歌浏览器(桌面):

• 与上面完全相同的透明但仍然有效的行为，但只有当它位于我在页面顶部的图片库上方时；当我滚动经过图库时，它会正常显示和运行。

我有点困惑为什么会这样。到目前为止似乎是一个 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

我很确定“单击”事件只是“鼠标”左键单击事件。平板电脑、智能手机和其他基于触摸的设备不会触发它。但是，它们会触发在 anchor 标记的 href 中编码的 javascript。例如:

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

一个更优雅的替代 IMO 是使用 jQuery Mobile plugin支持桌面和移动设备。摆脱 MENU div 周围的 anchor 标记并绑定(bind) 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 文件尽可能小。他们在下载部分为此提供了很好的资源。利用它。 :)