我有一个下拉菜单(响应式)，现在当用户悬停它时会显示下拉菜单，并且在移动设备上所有级别的下拉菜单都会展开。
我想将其更改为与 Twitter 引导菜单相同。因此，没有悬停显示下拉菜单，而是在用户单击元素时显示。我尝试添加 JS 函数 onclick，但它从未被调用。
有没有办法不用 JavaScript 而只用纯 CSS 来做到这一点？
这是我的 fiddle :http://jsfiddle.net/5vmayb6o/
更新
我已经更新了 Fiddle 我成功地添加了 JS 函数来显示隐藏元素。但是我还有一些问题。
- 当我点击下拉菜单显示但悬停再次工作但它不应该
- 悬停时仍会显示第三级下拉菜单。
- 在小屏幕布局中它不起作用所有元素仍然可见。
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>
最佳答案
试试这个
$(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>关于javascript - 如何将下拉显示从悬停更改为 OnClick？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26025372/