单击jquery无法正常运行

时间:2015-08-22 11:04:18

标签: javascript jquery css

您已尝试创建一个dropmenu来处理点击,因此触摸屏可以使用菜单。

$('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 个答案:

答案 0 :(得分:0)

下面这个CSS,是你的问题,

@JsonInclude(Include.NON_NULL)

您已将 :hover 转换添加到子列表中。所以,基本上在你提到的CSS onhover LI 的子菜单BI的高度应该增加至27px。 最初在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;
}

因此,您无法看到稍后在点击事件后看到的CSS转换。 因为,当您执行 jquery onclick 并执行 slideDown 时 这也是,附上一个

display: "none";
子菜单 UL 元素的内联样式中的

属性

因此,现在您可以看到自己在上面添加的CSS的过渡效果了。

<强> 更新:

更新了您的小提示以解决您的问题。如果那就是你想要的,请告诉我..

http://jsfiddle.net/e9e17adm/16/