如何将下拉显示从悬停更改为单击
How to change dropdown show from hover to OnClick?
我有一个下拉菜单(响应),现在当用户悬停时,会显示下拉菜单,在移动设备上,所有级别的下拉菜单都会展开。
我想把它改成和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>
我想这就是您想要的:
下拉菜单仅HTML&CSS
http://koen.kivits.com/articles/pure-css-menu/
相关文章:
- OpenLayers在悬停时高亮显示功能,并在单击时选择
- 使用Jquery创建一个具有单击和悬停功能的菜单
- 只要用户将鼠标悬停在jQuery中的某个元素上,就可以执行多次单击
- 悬停时展开垂直下拉菜单,而不是单击
- Highcharts-在单击而不是悬停时显示工具提示
- 如何使单击时的下拉列表不悬停
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- 如何使Highcharts中的渲染标签始终可见,并且相对于单击或悬停的点仍然可见
- 在可视化中将CSS从悬停更改为单击
- 鼠标悬停事件不会触发以触发 D3 中的单击事件
- 在单击按钮时激活按钮的悬停状态,直到单击另一个按钮(Javascript/JQuery)
- 悬停时无法单击锚标记,但其显示链接
- jQuery 悬停/单击事件位于同一 DIV(移动设备)上
- 悬停/单击DIV列表
- iPad悬停/单击问题
- 使用 Jquery 更改悬停单击功能
- 在悬停/单击时获取图像中颜色的十六进制代码
- 如何在不悬停/单击的情况下设置放大图像的动画
- 悬停/单击时水平滚动
- Javascript悬停/单击故障