如何將下拉菜單顯示從懸停更改為OnClick？

Question

我有一個下拉菜單（響應式），現在當用戶將鼠標懸停在下拉菜單上時，將顯示下拉菜單，並且在移動設備上，所有級別的下拉菜單都會展開。

我想將其更改為與twitter bootstrap菜單相同。 因此，沒有懸停顯示下拉菜單，而是在用戶單擊項目時顯示。 我試圖添加JS函數onclick，但是它從未被調用。

有沒有辦法做到這一點，而無需JavaScript，而只有純CSS？

這是我的小提琴： http : //jsfiddle.net/5vmayb6o/

UPDATE

我已經更新了Fiddle，我成功添加了JS函數來顯示hide元素。 但是我仍然有一些問題。

• 當我單擊下拉列表時，但仍在懸停工作，但不應
• 懸停時仍顯示第三級下拉菜單。
• 在小屏幕布局中，所有元素仍然可見。

HTML輸出：

<nav class="animenu">

    <input type="checkbox" id="button">
    <label for="button" onclick="">Menu</label>


                    <ul>
                        <li class="first selected bc">
                                <a href="http://localhost/2/en-us/">Home</a>

                        </li>
                        <li>
                                <a href="http://localhost/2/en-us/About-Us">About Us</a>
                                            <ul>
                        <li class="first">
                                <a href="http://localhost2/en-us/About-Us/StyleGuide">Style Guide</a>

                        </li>
                        <li class="last">
                                <a href="http://localhost2/en-us/About-Us/Test">Test</a>
                                            <ul class="animenu-third-level">
                        <li class="first">
                                <a href="http://localhost2/en-us/About-Us/Test/3rd-level">3rd level</a>

                        </li>
                        <li>
                                <a href="http://localhost2/en-us/About-Us/Test/First-Page">First Page</a>

                        </li>
                        <li>
                                <a href="http://localhos2/en-us/About-Us/Test/Second-Page">Second Page</a>

                        </li>
                        <li>
                                <a href="http://localhos2/en-us/About-Us/Test/Third-Page">Third Page</a>

                        </li>
                        <li>
                                <a href="http://localhost2/en-us/About-Us/Test/Fourth-Page">Fourth Page</a>

                        </li>
                        <li class="last">
                                <a href="http://localhos2/en-us/About-Us/Test/Fifth-Page">Fifth Page</a>

                        </li>
                </ul>

                        </li>
                </ul>

                        </li>


                </ul>


</nav>

Answer 1

嘗試這個

 $(function() { $('.animenu li').click(function(e) { $(this).find('> ul').addClass('show'); $(this).addClass('selected'); e.stopImmediatePropogation(); }); $(document).click(function(e) { if ($(e.target).closest('.animenu').length == 0) { $('.animenu .show').parents('li').removeClass('selected'); $('.animenu ul').removeClass('show'); } }) }); 

 .animenu > ul:after { content: ""; display: table; clear: both; } body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } .animenu { font: 13px Arial, Helvetica; } .animenu * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .animenu ul { margin: 0; padding: 0; list-style: none; } .animenu li { position: relative; } .animenu li > ul.show { opacity: 1; visibility: visible; margin: 0; } li { outline: none; } .animenu li.selected > a { color: white; background: #ff0000; } .animenu input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } .animenu label { display: none; cursor: pointer; user-select: none; } .animenu > ul { background: #f1f1f1; } .animenu > ul > li { float: left; } .animenu > ul > li > a { float: left; padding: 1em 3em; text-transform: uppercase; } .animenu > ul a { color: #333; text-decoration: none; } .animenu > ul ul { position: absolute; top: 100%; left: 0; z-index: 1; opacity: 0; visibility: hidden; margin: 2em 0 0 0; background-color: #f1f1f1; background-image: none; -webkit-transition-property: margin, opacity; -moz-transition-property: margin, opacity; -o-transition-property: margin, opacity; transition-property: margin, opacity; -webkit-transition-duration: .15s; -moz-transition-duration: .15s; -o-transition-duration: .15s; transition-duration: .15s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .animenu > ul ul li { display: block; } .animenu > ul ul li:first-child > a {} .animenu > ul ul li:first-child > a:after { content: ''; position: absolute; left: 4em; top: -12px; border: 6px solid transparent; border-bottom-color: inherit; } .animenu > ul ul li:last-child { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .animenu > ul ul li:last-child > a {} .animenu > ul ul a { padding: 1em; width: 175px; display: block; border-color: #373737; } .animenu > ul ul a { /*background-color: #ff0000; border-color: #fff;*/ color: #ff0000; background-color: #f1f1f1; } @media screen and (max-width: 480px) { .animenu > ul, .animenu > ul ul { visibility: visible; opacity: 1; display: none; } .animenu input[type=checkbox]:checked ~ label, .animenu input[type=checkbox] ~ label:hover { color: white; } .animenu label { background-color: #f1f1f1; color: #333; text-transform: uppercase; position: relative; display: block; padding: 1em 3em; } .animenu label:before { position: absolute; left: 0.5em; top: 0.2em; content: "\\2261"; font-size: 2em; } .animenu > ul { position: relative; margin: 0.5em 0 !important; padding: 0.25em; background-color: #f1f1f1; background-image: none; } .animenu > ul:after { content: ''; position: absolute; left: 2em; top: -12px; border: 6px solid transparent; border-bottom-color: inherit; } .animenu > ul li { display: block; } .animenu > ul > li { float: none; border: 0; background-color: #f1f1f1; background-image: none; } .animenu > ul > li > a { float: none; display: block; padding: 1em; } .animenu > ul ul { position: static; background-color: #f1f1f1; background-image: none; margin: 0; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } .animenu > ul ul li:first-child > a {} .animenu > ul ul li:first-child > a:after { content: none; } .animenu > ul ul li:last-child > a {} .animenu > ul ul a { padding-left: 2em; display: block; width: auto; } .animenu input[type=checkbox]:checked ~ ul { display: block; } .animenu input[type=checkbox]:checked ~ ul ul { display: block; } } @media screen and (max-width: 600px) { .animenu > ul > li > a { padding: 1em 2em; } } .animenu-third-level { left: 100% !important; top: 0 !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="animenu"> <input type="checkbox" id="button"> <label for="button" onclick="">Menu</label> <ul> <li class="first selected bc"><a href="http://localhost/2/en-us/">Home</a> </li> <li tabindex="0"><a href="javascript:void(0);">About Us</a> <ul> <li class="first"><a href="http://localhost2/en-us/About-Us/StyleGuide">Style Guide</a> </li> <li class="last" tabindex="0"><a href="javascript:void(0);">Test</a> <ul class="animenu-third-level"> <li class="first"><a href="http://localhost2/en-us/About-Us/Test/3rd-level">3rd level</a> </li> <li><a href="http://localhost2/en-us/About-Us/Test/First-Page">First Page</a> </li> <li><a href="http://localhos2/en-us/About-Us/Test/Second-Page">Second Page</a> </li> <li><a href="http://localhos2/en-us/About-Us/Test/Third-Page">Third Page</a> </li> <li><a href="http://localhost2/en-us/About-Us/Test/Fourth-Page">Fourth Page</a> </li> <li class="last"><a href="http://localhos2/en-us/About-Us/Test/Fifth-Page">Fifth Page</a> </li> </ul> </li> </ul> </li> </ul> </nav> 

Answer 2

我認為這是您要尋找的：

下拉菜單僅HTML和CSS
http://koen.kivits.com/articles/pure-css-menu/