平板電腦/手機上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

哎呀！我只注意到我已經張貼UL列表的錯誤的 「秩序」。

我張貼 $（ '格＃下拉UL禮'）。單擊

，而實際上應該是

$（ '格＃下拉菜單裏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下拉李UL李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> 

這將將造成T他的第二級子菜單可以在點擊時向上滑動或向下滑動，從而「顯示」和「隱藏」。

希望這有助於更多一點！

Answer 2

您可以嘗試使用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>