平板电脑/手机上的JS下拉菜单的关闭按钮？

Question

我一直在网站上使用以下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>

Answer 1

您可以尝试使用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>

Answer 2

糟糕！，我只是注意到我发布了ul列表的错误“顺序”。

我发布了$（'div＃dropdown ul li'）。click

实际应该是什么时候

$（'div＃dropdown li ul'）。click或$（'div＃dropdown li ul li'）。click

我之前发布的内容是打开和关闭主要链接。 我发布的新方法将打开以关闭子菜单。 LI内部的UL。 要添加更多子菜单功能，只需继续添加该元素即可。

$('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

你可以做这样的事情>>

带有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>

这将导致第二级子菜单在单击时向上或向下滑动，从而“显示”和“隐藏”。

希望这可以帮助更多！