私のメニューのドロップダウン部分をモバイルビューで切り替えるにはどうすればいいですか？

Question

デスクトップ上にマウスを置くと、ドロップダウンエフェクトが動作するメニューが表示されます（クイックリンクとクイックスタート）。

私は、モバイルビューでクリックトグルバージョンを作成しました。たとえば、ユーザーがクイックリンクをタップすると、メニューが追加のリンクと共に展開され、もう一度タップして閉じることができます。

私はブートストラップ（これは私のウェブサイトで使用しています）が同じように動作することを知っています。ユーザーがメニューをタップすると、メニューがドロップダウンします。それを拡大して他のものを代わりに押し下げるだけです。

私はjqueryバージョン1.12を呼び出していて、すべてのjqueryドキュメントを外部で使用しています。ここ

はJSフィドルです：

JsFiddle

HTML：

<ul class="top-level-menu"> 
    <li> 
     <a href="javascript:;">Quick Links</a> 
     <ul class="second-level-menu"> 
     <li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10353">About the program</a></li> 
     <li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10357">FAQs</a></li> 
     <li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10369">About the Society</a></li> 
     <li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10366">Where your money goes</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="javascript:;">Get Started</a> 
     <ul class="second-level-menu"> 
     <li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?fr_tm_opt=new&pg=tfind&fr_id=[[S334:fr_id]]">Create a fundraiser</a></li> 
     <li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=existing">Join a fundraiser</a></li> 
     <li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=none">Participate as an Individual<br />individal</a></li> 
     <li><a href="TR/UnitFundraisingEvent/General?pg=pfind&fr_id=[[S334:fr_id]]">Pledge a participant<br />or fundraiser</a></li> 
     <li><a href="Donation2?df_id=[[S42:0:form-id]]&PROXY_ID=[[S334:fr_id]]&PROXY_TYPE=21&FR_ID=[[S334:fr_id]]">Donate now</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10364">Fundraising Tips</a> 
    </li> 
    <li> 
     <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10356">Fundraising Ideas</a> 
    </li> 
    <li> 
     <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10365">Promotion Tips</a> 
    </li> 
    <li> 
     <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10360">Your Company</a> 
    </li> 
    <li> 
     <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10355">Contact Us</a> 
    </li> 
</ul> 

CSS：あなたは携帯電話のためのアコーディオンメニューを使用することができますブートストラップで

.third-level-menu{ 

    position: absolute; 
    top: 0; 
    right: -150px; 
    width: 150px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none; 
} 

.third-level-menu > li { 

    height: 30px; 
    background: #dff8fe; 
} 

.third-level-menu > li:hover { 
    background: #CCCCCC; 

} 

.second-level-menu { 

    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 300px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none; 
} 

.second-level-menu > li { 

    position: relative; 
    height: 30px; 
    background: #dff8fe; 
} 

.second-level-menu > li:hover { 

    background: #ffec9a; 

} 

.top-level-menu { 

    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.top-level-menu > li { 

    position: relative; 
    float: left; 
    height: 30px; 
    width: 133px; 
    background: #ecf0f1; 
} 

.top-level-menu > li:hover { 

    background: #FFEE00; 
} 

.top-level-menu li:hover > ul { 

    /* On hover, display the next level's menu */ 
    display: inline; 
} 


/* Menu Link Styles */ 

.top-level-menu a /* Apply to all links inside the multi-level menu */ 
{ 
    font: bold 12px Arial, Helvetica, sans-serif; 
    color: #000; 
    text-decoration: none; 
    padding: 0 0 0 10px; 

    /* Make the link cover the entire list item-container */ 
    display: block; 
    line-height: 30px; 
} 

.top-level-menu a:hover { 

    color: #000; 
} 


@media screen and (max-width: 768px) { 

    .top-level-menu > li { 
     width: 100%; 
    } 


} 

Answer 1

。メニューオプションを開くと、他のものが押されます。

http://getbootstrap.com/javascript/#collapse-example-accordion