满足特定条件时如何使菜单可点击或可拖放?在这种情况下,我希望菜单仅在单击按钮时才可单击或拖放
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="try.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="drop-nav">
<li><a href="#">Content Management</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
</ul><br><br><br>
<button>Click me</button>
</body>
</html>
一种解决方案是对悬停使用附加的类规则(用于下拉菜单),然后在ul
单击按钮时将类添加到。
对于单击处理程序,您也可以执行相同的操作,以查看是否ul
已单击类
$('#clickme').click(function(){
$('#drop-nav').addClass('clicked')
})
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border: 1px solid #000
}
li ul {
display: none;
}
ul li a {
display: block;
background: #000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
#drop-nav.clicked li a:hover {
background: #f00;
}
#drop-nav.clicked li:hover ul {
display: block;
position: absolute;
}
#drop-nav.clicked li:hover li {
float: none;
}
#drop-nav.clicked li:hover a {
background: #f00;
}
#drop-nav.clicked li:hover li a:hover {
background: #000;
}
#drop-nav.clicked li ul li {
border-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="drop-nav">
<li><a href="#">Content Management</a>
<ul>
<li><a href="#">Joomla</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Concrete 5</a></li>
</ul>
</li>
</ul><br><br><br>
<button id="clickme">Click me</button>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句