我是web应用程序开发的新手，也是Javascript的新手。我有一个悬停下拉菜单。菜单是从Javascript和CSS构建的。它在桌面浏览器中运行良好，但在移动浏览器中不起作用。当用户点击顶级菜单时，手机浏览器中不会显示任何下拉菜单。CSS中的任何错误
这是aspx
<div id="smoothmenu1" class="ddsmoothmenu" runat="server">
<ul class="menu" id="AMenu" runat="server" visible="true">
<li class="active" runat="server" id="MenuSummary">
<asp:HyperLink runat="server" CssClass="parent" NavigateUrl="#">
<span>Summary Report</span></asp:HyperLink>
<ul>
<li class="active" runat="server" id="Summary"><a href="~/Summary.aspx" class="parent" runat="server"><span>Summary Report</span></a> </li>
<li class="active" runat="server" id="SummarySR"><a href="~/View.aspx" class="parent" runat="server"><span>View</span></a></li>
</ul>
</li>
</ul>
这是javascript
var ddsmoothmenu = {
arrowimages: { down: ['downarrowclass', '../images/down.gif', 23], right: ['rightarrowclass', '../images/right1.gif'] },
transition: { overtime: 200, outtime: 200 }, //duration of slide in/ out animation, in milliseconds
shadow: { enable: true, offsetx: 5, offsety: 5 }, //enable shadow?
showhidedelay: { showdelay: 50, hidedelay: 100 }, //set delay in milliseconds before sub menus appear and disappear, respectively
///////Stop configuring beyond here///////////////////////////
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit") != -1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,
css3support: window.msPerformance || (!document.all && document.querySelector), //detect browsers that support CSS3 box shadows (ie9+ or FF3.5+, Safari3+, Chrome etc)
ismobile: navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers
getajaxmenu: function ($, setting) { //function to fetch external page containing the panel DIVs
var $menucontainer = $('#' + setting.contentsource[0]) //reference empty div on page that will hold menu
$menucontainer.html("Loading Menu...")
$.ajax({
url: setting.contentsource[1], //path to external menu file
async: true,
error: function (ajaxrequest) {
$menucontainer.html('Error fetching content. Server Response: ' + ajaxrequest.responseText)
},
success: function (content) {
$menucontainer.html(content)
ddsmoothmenu.buildmenu($, setting)
}
})
},
buildmenu: function ($, setting) {
var smoothmenu = ddsmoothmenu
var $mainmenu = $("#" + setting.mainmenuid + ">ul") //reference main menu UL
$mainmenu.parent().get(0).className = setting.classname || "ddsmoothmenu"
var $headers = $mainmenu.find("ul").parent()
$headers.hover(
function (e) {
if (!$(this).children('a:eq(0)').hasClass('selected')) {
$(this).children('a:eq(0)').addClass('selected');
}
},
function (e) {
if ($(this).children('a:eq(0)').attr('rel') != "yes") {
$(this).children('a:eq(0)').removeClass('selected')
}
}
)
$headers.each(function (i) { //loop through each LI header
var $curobj = $(this).css({ zIndex: 100 - i }) //reference current LI header
var $subul = $(this).find('ul:eq(0)').css({ display: 'block' })
$subul.data('timers', {})
this._dimensions = { w: this.offsetWidth, h: this.offsetHeight, subulw: $subul.outerWidth(), subulh: $subul.outerHeight() }
this.istopheader = $curobj.parents("ul").length == 1 ? true : false //is top level header?
$subul.css({ top: this.istopheader && setting.orientation != 'v' ? this._dimensions.h + "px" : 0 })
$curobj.children("a:eq(0)").css(this.istopheader ? { paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
'<img src="' + (this.istopheader && setting.orientation != 'v' ? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
+ '" class="' + (this.istopheader && setting.orientation != 'v' ? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
+ '" style="border:0;" />'
)
if (smoothmenu.shadow.enable && !smoothmenu.css3support) { //if shadows enabled and browser doesn't support CSS3 box shadows
this._shadowoffset = { x: (this.istopheader ? $subul.offset().left + smoothmenu.shadow.offsetx : this._dimensions.w), y: (this.istopheader ? $subul.offset().top + smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
if (this.istopheader)
$parentshadow = $(document.body)
else {
var $parentLi = $curobj.parents("li:eq(0)")
$parentshadow = $parentLi.get(0).$shadow
}
this.$shadow = $('<div class="ddshadow' + (this.istopheader ? ' toplevelshadow' : '') + '"></div>').prependTo($parentshadow).css({ left: this._shadowoffset.x + 'px', top: this._shadowoffset.y + 'px' }) //insert shadow DIV and set it to parent node for the next shadow div
}
$curobj.hover(
function (e) {
var $targetul = $subul //reference UL to reveal
var header = $curobj.get(0) //reference header LI as DOM object
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer = setTimeout(function () {
header._offsets = { left: $curobj.offset().left, top: $curobj.offset().top }
var menuleft = header.istopheader && setting.orientation != 'v' ? 0 : header._dimensions.w
menuleft = (header._offsets.left + menuleft + header._dimensions.subulw > $(window).width()) ? (header.istopheader && setting.orientation != 'v' ? -header._dimensions.subulw + header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
if ($targetul.queue().length <= 1) { //if 1 or less queued animations
$targetul.css({ left: menuleft + "px", width: header._dimensions.subulw + 'px' }).animate({ height: 'show', opacity: 'show' }, ddsmoothmenu.transition.overtime)
if (smoothmenu.shadow.enable && !smoothmenu.css3support) {
var shadowleft = header.istopheader ? $targetul.offset().left + ddsmoothmenu.shadow.offsetx : menuleft
var shadowtop = header.istopheader ? $targetul.offset().top + smoothmenu.shadow.offsety : header._shadowoffset.y
if (!header.istopheader && ddsmoothmenu.detectwebkit) { //in WebKit browsers, restore shadow's opacity to full
header.$shadow.css({ opacity: 1 })
}
header.$shadow.css({ overflow: '', width: header._dimensions.subulw + 'px', left: shadowleft + 'px', top: shadowtop + 'px' }).animate({ height: header._dimensions.subulh + 'px' }, ddsmoothmenu.transition.overtime)
}
}
}, ddsmoothmenu.showhidedelay.showdelay)
},
function (e) {
var $targetul = $subul
var header = $curobj.get(0)
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer = setTimeout(function () {
$targetul.animate({ height: 'hide', opacity: 'hide' }, ddsmoothmenu.transition.outtime)
if (smoothmenu.shadow.enable && !smoothmenu.css3support) {
if (ddsmoothmenu.detectwebkit) { //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
header.$shadow.children('div:eq(0)').css({ opacity: 0 })
}
header.$shadow.css({ overflow: 'hidden' }).animate({ height: 0 }, ddsmoothmenu.transition.outtime)
}
}, ddsmoothmenu.showhidedelay.hidedelay)
}
) //end hover
}) //end $headers.each()
if (smoothmenu.shadow.enable && smoothmenu.css3support) { //if shadows enabled and browser supports CSS3 shadows
var $toplevelul = $('#' + setting.mainmenuid + ' ul li ul')
var css3shadow = parseInt(smoothmenu.shadow.offsetx) + "px " + parseInt(smoothmenu.shadow.offsety) + "px 5px #aaa" //construct CSS3 box-shadow value
var shadowprop = ["boxShadow", "MozBoxShadow", "WebkitBoxShadow", "MsBoxShadow"] //possible vendor specific CSS3 shadow properties
for (var i = 0; i < shadowprop.length; i++) {
$toplevelul.css(shadowprop[i], css3shadow)
}
}
$mainmenu.find("ul").css({ display: 'none', visibility: 'visible' })
},
init: function (setting) {
if (typeof setting.customtheme == "object" && setting.customtheme.length == 2) { //override default menu colors (default/hover) with custom set?
var mainmenuid = '#' + setting.mainmenuid
var mainselector = (setting.orientation == "v") ? mainmenuid : mainmenuid + ', ' + mainmenuid
document.write('<style type="text/css">n'
+ mainselector + ' ul li a {background:' + setting.customtheme[0] + ';}n'
+ mainmenuid + ' ul li a:hover {background:' + setting.customtheme[1] + ';}n'
+ '</style>')
}
this.shadow.enable = (document.all && !window.XMLHttpRequest) ? false : this.shadow.enable //in IE6, always disable shadow
jQuery(document).ready(function ($) { //ajax menu?
if (typeof setting.contentsource == "object") { //if external ajax menu
ddsmoothmenu.getajaxmenu($, setting)
}
else { //else if markup menu
ddsmoothmenu.buildmenu($, setting)
}
})
}
} //end ddsmoothmenu variable
这是CSS
.ddsmoothmenu{
font: normal 11px Arial, Helvetica, sans-serif;
background: url("../images/sub-head-bg.png") repeat-x scroll 0 0 #01916d;
/*background of menu bar (default state)*/
width: 100%;
position:relative;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
margin-left:10px;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
/*background: #414141;*/ /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #01916d;
color: #2d2b2b;
text-decoration: none;
}
.ddsmoothmenu ul ul li a{
background: #65d9b2;
}
.ddsmoothmenu ul ul li a:hover{
background: #01916d;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active
menu items' LI A element*/
background: #65d9b2;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: #65d9b2; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
width:179px !important;
margin-left:0px;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
margin-left:0px;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 11px Arial, Helvetica, sans-serif;
width: 163px; /*width of sub menus*/
padding: 5px 5px 5px 10px;
margin: 0;
border-top: 1px dotted #a6ffe9;
border-right:none;
}
.ddsmoothmenu ul li ul li:last-child a{border-bottom:1px solid #fff;}
/* Holly Hack for IE */
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass {
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass {
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Menu Item widths */
list-style-type: none;
font: bold 11px Verdana;
}
.ddsmoothmenu-v ul li{
position: relative;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li
a:active{
background: #414141; /*background of menu items (default state)*/
color: white;
}
.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently
active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu-v ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
font-weight: normal;
visibility: hidden; /*it's here i should make change to true and important */
}
/* Holly Hack for IE */
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
根据您所说的，我假设您的下拉功能基于；悬停"；？
如果事实确实如此，有一个简单的解释：
当使用触摸设备时；悬停"；功能。如果你想让你的应用程序在触摸设备上使用，你需要完全避免使用悬停，或者为你拥有的每个悬停功能实现一个与触摸兼容的替代方案。(甚至忽略触摸设备：悬停仍然不考虑无鼠标使用(使用选项卡导航((-因此，只有悬停才能访问主要功能是一个主要的可访问性缺陷。(所以也许不要这么做(
对于dropwindows(或通常的表单元素(，您可以使用焦点事件而不是悬停(适用于桌面(选项卡和鼠标(和移动/触摸((有关进一步的帮助：在这个答案中，您可以看到如何使用焦点事件实现下拉菜单：https://stackoverflow.com/a/73922116/19529102)