我一直在我的网站上使用以下CSS下拉框，我注意到当你点击激活ipad / iphone上的下拉菜单时，除了刷新页面之外没有办法关闭下拉菜单
是否有可以添加到平板电脑/手机用户下拉框底部的JS代码，以便他们可以在不进行选择时关闭该框？
/* css */
#dropdown {
}
#dropdown ul {
}
#dropdown li {
}
.dropmain1 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
width: 98px;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
margin-top: 10px;
-moz-box-shadow: 3px 9px 8px #888;
-webkit-box-shadow: 3px 9px 8px #888;
box-shadow: 3px 9px 8px #888;
}
.dropmain2 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 5px;
-moz-box-shadow: 3px 5px 8px #888;
-webkit-box-shadow: 3px 5px 8px #888;
box-shadow: 3px 5px 8px #888;
}
#drop2 { width: 633px; margin-top: 10px; padding: 9px; }
#drop3 { width: 200px; margin-top: 10px; padding: 9px; }
#drop4 { width: 200px; margin-top: 10px; padding: 9px; }
#drop5 { width: 200px; margin-top: 10px; padding: 9px; }
/*this is the css for the horizontal version*/
.horizontal ul{
border: none;
list-style-type: none;
padding:0;margin:0;
}
.horizontal ul li{
float: left;
position: relative;
margin:0;padding:0;
}
a.toplevel {
display: block;
color: #525252;
text-decoration: none;
overflow: hidden;
display:inline-block;
padding-left:15px;
padding-right: 15px;
line-height:18px;
background:transparent url(images/misc/menu_open.gif) center left no-repeat;
}
.horizontal li li{
float: none;
margin-bottom: -1px;
}
.horizontal li li.last{
border-bottom: none;
}
.horizontal ul li ul{
position: absolute;
top: 1.3em;
left: -1px;
}
.horizontal ul ul ul{
width: 130px;
top: -1px;
left: 128px;
margin-top: 0;
}
.horizontal.left ul ul ul,.horizontal .left ul ul{
top: -1px;
left: -128px;
}
.horizontal ul li li a{
padding: 12px;
}
.horizontal ul li:first-child>a{
}
.horizontal ul li a.first{
}
.horizontal ul li li a.first{
}
.horizontal ul li li:first-child>a{
}
div.horizontal ul li.pixelfix ul{
left: 0;
}
div.horizontal ul li.pixelfix ul ul{
left: 128px;
}
/*here we use a little CSS to make a basic/backup dropdown menu in modern browsers *cough* not IE6 or less *cough* if javascript is disabled.Flickering never happens in these browsers*/
.mlmenu li ul{
display: none;
}
.mlmenu li:hover>ul{
display: block;
}
/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
.accessible li ul{
display: block;
}
/*Code to show an element has a child*/
.mlmenu.plus li a:first-child:not(:last-child):after{
content: ' ';
}
.plus a span{
padding-left: .5em;
}
.noshow{
visibility: hidden;
}
/*colors for menu*/
}
.bluewhite li a{
background-color: ;
color: #ffffff;
}
.bluewhite li a:hover,.bluewhite li a.first:hover,.bluewhite .trail a.hover{
/* HOVER */
}
.bluewhite li:first-child>a:hover{
}
.bluewhite ul{
border-color: #000033;
}
#ldrop a:link, #ldrop a:visited {
}
#ldrop a:hover, #ldrop a:active {
}
#holdjump1 {
padding-left: 8px; padding-bottom: 6px;
}
#holdjump1 div {
}
#holdjump1 a:link, #holdjump1 a:visited {
padding: 2px 0 2px 3px; margin:0;
}
#holdjump1 li {
padding:0; margin:0;
}
.fjl {
display: inline-block;
border-bottom: 1px dotted #c1c1c1;
width:30%;
margin: 0 5px 0 5px;
padding: 2px;
font-size: 12px;
font-weight: normal;
}
.fjl a:link, .fjl a:visited {
display: block;
}
.fjl a:active, .fjl a:hover {
background: #a1a1a1;
text-decoration: none;
color: #ffffff;
}
<div id="dropdown" class="mlmenu horizontal bluewhite blindv plus inaccessible delay">
<ul>
<li>Menu Link</li>
<ul> <li>test</li> </ul>
</ul>
</div>
答案 0 :(得分：0)
您可以尝试使用JQuery。我不确定如何在完整的javascript中执行此操作但是如果您下载jquery库，请链接到它，然后尝试这样的操作它可能会有效。
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).show();
$('div#dropdown ul li').click(function() {
$(this).hide();
});
});
});
</script>
或
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).slideDown();
$('div#dropdown ul li').click(function() {
$(this).slideUp();
});
});
});
</script>
答案 1 :(得分：0)
我发布了 $（'div＃dropdown ul li'）。点击
实际上应该
$（'div＃dropdown li ul'）。点击或 $（'div＃dropdown li ul li'）。点击
我之前发布的是要打开和关闭的主要链接。我发布的新方法将打开关闭子菜单。 UL里面的LI。要添加更多子菜单功能，只需继续添加元素即可。
$('div#dropdown li ul // 1-level drop down
$('div#dropdown li ul li ul // 2-level drop down
$('div#dropdown li ul li ul li ul // 3 level drop down.
或者您可以为每个级别创建类。实施例
而不是2级下降 $（'div＃dropdown li ul li ul
你可以做这样的事情＆gt;＆gt;
带有2级子菜单的示例菜单
<ul>
<li>link1<ul class="sub1">
<li>sublink1-1<ul>
<li>sub-sublink1-1</li>
<li>sub-sublink1-2</li></ul></li></ul></li>
</ul>
Jquery的
<script>
$(document).ready(function() {
$('ul.sub1').click(function() {
$(this).slideToggle();
});
});
</script>
这会导致第二级子菜单在点击时向上滑动或向下滑动，从而“显示”和“隐藏”。
希望这会有所帮助！