javascript - 单击时的 jquery 无法正常运行

Question

您好，您已尝试创建一个下拉菜单来处理点击，以便触摸屏可以使用该菜单。

$('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

Answer 1

下面这个 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 的过渡效果。

更新:

更新了您的 fiddle 以解决您的问题。让我知道这是否是您想要的......

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