Question

我有一个链接，一旦点击，就会显示一个菜单。它适用于网站设计中方便断点的较小浏览器窗口（965px）。以下是它在不同浏览器中的行为方式：

Firefox（桌面），Opera（桌面），Puffin（移动）：

完美无缺。

Safari（桌面和移动），Opera Mini，谷歌Chrome（移动），Dolphin（移动），Mercury（移动），Coast 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

我非常确定＆＃34;点击＆＃34;事件是＆＃34;鼠标＆＃34;仅限左键单击事件。平板电脑，智能手机和其他基于触摸的设备不会触发它。但是，它们会触发在锚标记的href中编码的javascript。例如：

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

更优雅的替代IMO将使用jQuery Mobile plugin来支持桌面和移动设备。摆脱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

想出来！它现在正在全面运作。

感谢fastforol over codingforums.com

我有overflow:hidden;作为.navigation div的属性......是啊......

来自早期实验的下拉菜单中的一段代码。

为我提供正确的整理服务！

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

2 个答案: