タブレット/携帯電話のJSドロップダウンメニューの閉じるボタン？

Question

私は私のウェブサイト上で、次のCSSのドロップダウンボックスを使用してきた、と私はあなたがアプリ/ 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リストの間違った "順序" を掲載していた気づきました。

私はDIV '（クリックしてください。それは実際に

$（ 'div要素＃ドロップダウンのli UL'）でなければなりませんとき

をクリックします。 $（ 'div要素＃ドロップダウンUL李'）を掲示または $ #dropdownのli ulの李 '）。私は以前に掲載何

をクリックして開閉されるメインリンクのためでした。私が掲示している新しい方法は、サブメニューを閉じて開きます。 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＃ドロップダウン李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> 

彼は第2レベルのサブメニューをクリックしてスライドするか、またはスライドダウンして、「表示」と「隠す」。

希望これはもう少し助けました！

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>