[英]Simple Javascript for Touch Devices
I'm attempting to create a responsive menu as simple as possible. 我试图创建一个尽可能简单的响应式菜单。 I have almost no experience in Javascript.
我几乎没有Java经验。
Is there a simple way to change display:none
to display:block
on touch and then back to display:none when touched outside of the element? 有一个简单的方法来改变
display:none
以display:block
上触摸,然后回显示:无当元素之外的感动?
HTML: HTML:
<nav>
<ul>
<i class="fa fa-bars"></i> Menu
<a href="index.html"><li>Home <i class="fa fa-home"></i></li></a>
<a href="surfbagelmenu.htm"><li>Menu <i class="fa fa-cutlery"></i></li></a>
<a href="gallery.htm"><li>Gallery <i class="fa fa-picture-o"></i></li></a>
<a href="links.htm"><li>Cool Links <i class="fa fa-link"></i></li></a>
</ul>
CSS: CSS:
nav li {
display:none;
}
nav ul:hover li {
display:block;
}
(used hover since it works on Android so you get the idea of what I'm trying to do) (因为悬停功能在Android上可以使用,所以一直使用它,这样您就可以了解我要做什么了)
Thanks for any help! 谢谢你的帮助!
Edit: I forgot to mention that I do not want to use jQuery. 编辑:我忘了提到我不想使用jQuery。 Just pure Javascript.
只是纯Javascript。 Thanks!
谢谢!
This function calls the isTouchDevice()
function, and if it succeeds a special touch events is attached to the page. 此函数调用
isTouchDevice()
函数,并且如果成功,则会在页面上附加特殊的触摸事件。
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
So that's it, just include these functions on your page and just call it by passing in the ID
of the element you want to scroll. 就是这样,只需在页面上包含这些函数,然后通过传入要滚动的元素的
ID
即可调用它。 Like so: touchShow("MyElement");
像这样:
touchShow("MyElement");
. 。
function touchShow(id){
if(isTouchDevice()){ //if touch events exist...
$('#id').show();
//An alternate way is to use the jQuery css method:
$("#id").css("display", "block");
}
}
First thing, you should fix up your markup, your nesting is wrong: 首先,您应该修复标记,嵌套错误:
<nav>
<ul>
<li id="menu_toggle">Menu</li>
<li><a href="#">Link 01</a></li>
<li><a href="#">Link 02</a></li>
<li><a href="#">Link 03</a></li>
</ul>
</nav>
And change your CSS to something like this: 并将您的CSS更改为如下所示:
nav li { display: none; }
nav.open li,
nav:hover li,
#menu_toggle { display: block; }
This means all your list items are invisible, but for the toggle and if the nav has a class open
, or if the mouse hovers the nav (on a desktop). 这意味着您的所有列表项都是不可见的,但是对于切换以及导航是否
open
了类或鼠标悬停导航(在桌面上)而言,都是不可见的。
Then your JavaScript (jQuery) could look like this: 然后,您的JavaScript(jQuery)可能如下所示:
$(function(){
// document ready
$('#menu_toggle').on('touchstart', function(){
$('nav').toggleClass('open');
});
});
This will toggle the menu on a touch device when hover
isn't really working. 当
hover
无法正常工作时,这将在触摸设备上切换菜单。
Tracking a touch anywhere else but the menu is a bit trickier, you could: 除了菜单之外,在其他任何地方跟踪触摸都比较麻烦,您可以:
So for option 1, assuming you have something like this: 因此,对于选项1,假设您具有以下内容:
<nav>...</nav>
<div id="content">...</div>
You could do this: 您可以这样做:
$(function(){
// document ready
var isMenuOpen = false;
$('#menu_toggle').on('touchstart', function(){
// reverse boolean
isMenuOpen = !isMenuOpen;
// add/remove class depending on state
$('nav').toggleClass('open', isMenuOpen);
if( isMenuOpen ){
// If menu is now open, add a closing event handler to the content
$('#content').once('touchstart', function(){
$('nav').removeClass('open');
});
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.