[英]Class styles are not applied in iOS
I've encountered a rather strange issue with our site's top navigation bar when viewed on an iPad. 在iPad上查看时, 我们网站的顶部导航栏遇到了一个非常奇怪的问题。 When a user taps on the "Brands" link, a drop-down menu should be shown, but it is not.
当用户点击“品牌”链接时,应该显示一个下拉菜单,但是没有显示。
When a user taps on the "Departments" link the corresponding drop-down menu is shown properly and if the user subsequently taps on the "Brands" link the drop-down menu displays properly. 当用户点击“部门”链接时,相应的下拉菜单将正确显示,如果用户随后点击“品牌”链接,则下拉菜单将正确显示。
These drop-down menus are controlled via CSS class toggles triggered on hover by jQuery. 这些下拉菜单由jQuery悬停时触发的CSS类切换控制。 When a user who hasn't previously tapped on the "Departments" link taps on the "Brands" link the class is applied correctly, however the styles aren't applied in a way that's visible to the user.
当以前未点击“部门”链接的用户点击“品牌”链接时,将正确应用该类,但是样式不会以该用户可见的方式应用。 I have verified this with the device emulator in Xcode as well as by debugging an iPad plugged in to my machine.
我已经使用Xcode中的设备仿真器以及调试插入到我的计算机中的iPad对此进行了验证。
Additionally, on certain pages of the site , the drop-downs seem to work fine. 此外, 在网站的某些页面上 ,下拉菜单似乎可以正常工作。 I'm at a loss, I can't see what's going on here and I hope someone might point me in the right direction.
我很茫然,我看不到这里发生了什么,希望有人能指出我正确的方向。
<style>
.tab {
position: absolute;
left: 0;
height: 0;
overflow: hidden;
display: block;
visibility: hidden;
margin: 1px 0 0 0;
background: #efefef;
background: rgba(255,255,255,0.95);
opacity: 0;
transition: 0.2s;
}
.drop.active .tab {
visibility: visible;
z-index: 20;
height: auto;
overflow: visible;
opacity: 1;
}
</style>
<nav id="nav" class="sixteen columns main-menu new">
<ul id="tab-nav" class="new-nav">
<li><a href="/collections/new-arrivals">New Arrivals</a></li>
<li class="drop">
<a href="/pages/designer-list">Brands</a>
<div class="tab">
<!-- SUBMENU CONTENT -->
</div>
</li>
<li class="drop">
<a href="/collections/all">Departments</a>
<div class="tab">
<!-- SUBMENU CONTENT -->
</div>
</li>
<li><a href="/blogs/the-look">The Look</a></li>
<li><a href="/blogs/news">News</a></li>
<li class="mobileonly"><a href="/search">Search</a></li>
</ul>
</nav>
<script>
// Tab Nav Toggle
$(document).ready(function(){
if ( viewWidth > 767 && is_touch_device() ) {
$('.main-menu li.drop').hover(
function() {
$(this).find('a').first().click(function(e) {
e.preventDefault();
});
$(this).toggleClass('active');
}
);
} else if ( viewWidth > 767 &! is_touch_device() ) {
$('.main-menu li.drop').hover(
function() {
$(this).toggleClass('active');
}
);
}
});
</script>
I took another look and the issue doesn't seem to have anything to do with the javascript side of things. 我又看了一遍,这个问题似乎与javascript方面没有任何关系。 I tested again on my iPad with Javascript disabled (I have the effect applied with :hover as a no-js fallback) and the same weird behaviour persists.
我在禁用了Javascript的iPad上再次进行了测试(我将:hover效果应用为no-js后备),并且相同的奇怪行为仍然存在。 The "Brands" menu doesn't work until after you've tapped on the "Departments menu.
在点击“部门”菜单后,“品牌”菜单才起作用。
Okay, it's not precisely clear what you're trying to do, but I think I get the gist, and I'll edit my answer as we go. 好的,还不清楚您要做什么,但是我想我的要点是,我将在编辑过程中修改答案。
First, viewWidth
is not defined here, and so can't be used, and is_touch_device()
is not, to the best of my knowledge, a jQuery method. 首先,在这里未定义
viewWidth
,因此无法使用, is_touch_device()
我所知, is_touch_device()
不是jQuery方法。
Second, if you're targeting mobile devices, I'm guessing you want to fire these events when the window width is LESS THAN 767px
? 其次,如果您以移动设备为目标,我猜您想在窗口宽度小于
767px
时触发这些事件吗? If so, you've got the wrong operator. 如果是这样,则说明您输入了错误的运算符。 Take a look at this slightly modified and cleaned up version of your function, and take a look at the fiddle (linked below), and let me know if that's what you're after:
看一下这个功能的经过稍微修改和清理的版本,看一下小提琴(在下面链接),然后让我知道你在追求什么:
$(document).ready(function(){
$('li.drop').hover(function() {
var width = $(window).width();
if ( width <= 596 ) {
$(this).toggleClass('active');
$('.tab').text("The parent list of the link whose text reads, '" + $(this).find('a').text() + "' now has the class, '" + $(this).attr('class') + "'.");
}
});
$('li.drop').find('a').click(function(e) {
e.preventDefault();
alert("You have clicked the '" + $(this).text() + "' link.");
});
});
A couple things to note: 需要注意的几件事:
I changed our target width to 596 because that's the default width of the JSFiddle window. 我将目标宽度更改为596,因为这是JSFiddle窗口的默认宽度。 I used your
.tab
container as sort of a console to keep track of the class toggles. 我使用
.tab
容器作为控制台来跟踪类切换。 I used alerts to let you know the click function is working properly. 我使用警报来告知您单击功能是否正常运行。
Here's the fiddle: http://jsfiddle.net/T8LKu/ 这是小提琴: http : //jsfiddle.net/T8LKu/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.