单击时jquery不能正常工作
单击时jquery不能正常工作
提问于 2015-08-22 19:04:18
嗨，我试图创建一个下拉菜单来点击，这样触摸屏就可以使用菜单了。
$('a.dropsmall2').click(function() {
$(this).next('ul').slideToggle(500,'easeInOutQuad');})；
这部分似乎起作用了。
$('#dropmenu a').click(function() {
$(this).parents('ul').not('#dropmenu').hide('medium');})；
这个部分确实有点用，但一旦你点击它，菜单就会打开和关闭，最后它会一直关闭。
$('#dropmenu ul').mouseleave(function() {
$(this).slideToggle(500,'easeInOutQuad');})；这部分可以工作，但一旦鼠标离开，菜单就可以在悬停时打开，而不是被点击(不确定是这一部分搞乱了它，还是代码的第一部分。
jsfiddle -> http://jsfiddle.net/e9e17adm/15
回答 1
Stack Overflow用户
发布于 2015-08-22 19:26:19
下面这个CSS就是你的问题所在，
.dropmenu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .3s ease .1s;
-moz-transition: height .3s ease .1s;
-o-transition: height .3s ease .1s;
-ms-transition: height .3s ease .1s;
transition: height .3s ease .1s;
}
.dropmenu li:hover > ul li {
height: 27px;
line-height: 27px;
overflow: visible;
padding: 0;
}您已经将:hover转换添加到您的子列表中。所以，基本上在CSS中你已经提到onhover of main LI其子菜单BI的高度应该增加到27px。只是最初在CSS中的子菜单是
display: "none";因此，您不能看到稍后在单击事件之后看到的CSS转换。因为，当您执行jquery onclick和slideDown时，也会附加一个
display: "block";子菜单UL元素的内联样式中的
因此，现在您可以看到您自己在上面添加的CSS的过渡效果。
更新：
已更新您的小提琴以解决您的问题。如果这是你想要的，请告诉我..
http://jsfiddle.net/e9e17adm/16/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32155378
复制相关文章
相似问题
腾讯云开发者
