Javascript 移动屏幕上的可单击子菜单
我正在构建一个WP主题，并使用默认的子菜单行为作为用户鼠标悬停和下拉子菜单出现。但在手机屏幕上，悬停功能不起作用，我只是隐藏了手机分辨率的子菜单。 但正如我们在WP dashboard中看到的，子菜单使用可单击功能进行了转换，我们可以通过单击父菜单访问子菜单。Javascript 移动屏幕上的可单击子菜单,javascript,jquery,wordpress,wordpress-theming,Javascript,Jquery,Wordpress,Wordpress Theming,我正在构建一个WP主题，并使用默认的子菜单行为作为用户鼠标悬停和下拉子菜单出现。但在手机屏幕上，悬停功能不起作用，我只是隐藏了手机分辨率的子菜单。 但正如我们在WP dashboard中看到的，子菜单使用可单击功能进行了转换，我们可以通过单击父菜单访问子菜单。 如何在主题中实现此功能 这是您要找的 <!DOCTYPE html> <html> <head> <style> a { text-deco
如何在主题中实现此功能 这是您要找的
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background: #175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color: #fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index: 100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background: #249578;
z-index: 200;
border-top: 1px solid #1d7a62;
}
@media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul,
.nav li li.hover ul {
position: static;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
<a href="#">Shoes</a>
<ul>
<li>
<a href="#">Womens</a>
<ul>
<li><a href="#">Sandals</a>
</li>
<li><a href="#">Loafers</a>
</li>
<li><a href="#">Flats</a>
</li>
</ul>
</li>
<li>
<a href="#">Mens</a>
<ul>
<li><a href="#">Loafers</a>
</li>
<li><a href="#">Sneakers</a>
</li>
<li><a href="#">Formal</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Shipping Info</a>
</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
} else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
</script>
</body>
</html>
a{
文字装饰：无；
}
.集装箱{
宽度：90%；
最大宽度：900px；
利润率：10px自动；
}
.切换菜单{
显示：无；
背景:#666；
填充：10px 15px；
颜色：#fff；
}
.导航{
列表样式：无；
*缩放：1；
背景：#175e4c；
}
.导航：之前，
.导航：之后{
内容：“；
显示：表格；
}
.导航：之后{
明确：两者皆有；
}
美国海军{
列表样式：无；
宽度：9em；
}
.导航a{
填充：10px 15px；
颜色：#fff；
}
李国荣先生{
位置：相对位置；
}
.nav>li{
浮动：左；
边框顶部：1px实心#104336；
}
.nav>li>.parent{
背景图片：url（“images/downArrow.png”）；
背景重复：无重复；
背景位置：右；
}
.nav>li>a{
显示：块；
}
李国荣先生{
位置：绝对位置；
左：-9999px；
}
.nav>li.hover>ul{
左：0；
}
.nav li li.hover ul{
左：100%；
排名：0；
}
李丽娜先生{
显示：块；
背景：1d7a62；
位置：相对位置；
z指数：100；
边框顶部：1px实心#175e4c；
}
李娜{
背景：#249578；
z指数：200；
边框顶部：1px实心#1d7a62；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.主动{
显示：块；
}
.nav>li{
浮动：无；
}
.nav>li>.parent{
背景位置：95%50%；
}
.nav li li.家长{
背景图片：url（“images/downArrow.png”）；
背景重复：无重复；
背景位置：95%50%；
}
美国海军{
显示：块；
宽度：100%；
}
.nav>li.hover>ul，
.nav li li.hover ul{
位置：静态；
}
}
-
-
-
-
-
-
-
-
-
-
var ww=document.body.clientWidth；
$（文档）.ready（函数（）{
$（“.nav li a”）。每个（函数（）{
if（$（this）.next（）.length>0）{
$（此）.addClass（“父级”）；
};
})
$（“.toggleMenu”）。单击（函数（e）{
e、 预防默认值（）；
$（此）.toggleClass（“活动”）；
$（“.nav”）.toggle（）；
});
调整菜单（）；
})
$（窗口）.bind（'resize orientationchange'，function（）{
ww=document.body.clientWidth；
调整菜单（）；
});
var adjustMenu=功能（）{
如果（ww<768）{
$（“.toggleMenu”）.css（“显示”、“内联块”）；
if（！$（“.toggleMenu”）.hasClass（“活动”））{
$（“.nav”）.hide（）；
}否则{
$（“.nav”）.show（）；
}
$（“.nav li”）.unbind（'mouseenter mouseleave'）；
$（“.nav li a.parent”）.unbind（'click'）.bind（'click'，函数（e）{
//必须连接到锚定元件，以防止起泡
e、 预防默认值（）；
$（this.parent（“li”）.toggleClass（“hover”）；
});
}否则如果（ww>=768）{
$（“.toggleMenu”）.css（“显示”、“无”）；
$（“.nav”）.show（）；
$（“.nav li”）.removeClass（“悬停”）；
$（“.nav li a”）.unbind（'click'）；
$（“.nav li”）.unbind（'mouseenter mouseleave'）.bind（'mouseenter mouseleave'，function（）{
//必须连接到li，以便鼠标悬停在子菜单上时不会触发mouseleave
$（this.toggleClass（'hover'）；
});
}
}