單擊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 transition添加到了子列表中。 因此，基本上在CSS中您已經提到，將主LI 懸停時，其子菜單BI的高度應增加到27px。 只是最初在CSS子菜單中 是

display: "none";

因此，您將看不到單擊事件之后在稍后看到的CSS過渡。 因為，當執行jquery onclick並進行slideDown時，這還會附加一個

display: "block";

子菜單UL元素的內聯樣式中的屬性

因此，現在您可以看到自己在上面添加的CSS的過渡效果。

更新：

更新了您的小提琴以解決您的問題。 讓我知道您是否想要的。

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