的Javascript下拉列表將不再工作

我有這樣的代碼：http://jsfiddle.net/spadez/928Dj/39/的Javascript下拉列表將不再工作

$("ul.opt").addClass("hidden"); 
$('#filter > li > a').on("click", function (e) { 
    var cache = $(this).next('ul'); 
    $('#filter ul:visible').not(cache).hide(); 
    cache.toggle(); 
});

有在控制檯中沒有錯誤。在我的HTML我移動ul以外的form，從我可以看到的JavaScript仍然有效，但下拉不再觸發，當我點擊鏈接。代碼中的錯誤在哪裏？

來源

2014-07-08 Jimmy

'變種緩存= $（本）。接下來（）找到（ 'UL'）;'。 - 或者完全避免使用'next（）'。 – gskema

我剛剛從您的代碼中將行＃3替換爲

var cache = $(this).next('form').find('ul');

Fiddle

來源

2014-07-08 19:40:29 mvanhouten

問題是next()不是ul。

next()將得到下一個兄弟，因爲next()不是ul它（next("ul")）將不包含的元素。

既然你想要得到的ul的下一個兄弟的孩子，試試這個：

JSFiddle

$("ul.opt").addClass("hidden"); 
$('#filter > li > a').on("click", function (e) { 
    var cache = $(this).next('form').find("ul"); 
    $('#filter ul:visible').not(cache).hide(); 
    cache.toggle(); 
});

注：

它不會出現這會發生......但如果有可能你可能有其他兄弟姐妹之間a和form，你可以做.nextAll('form')，這會看到a之後的所有兄弟姐妹。

如果有可能，你可能有form下ul多層次的，你可能想要做.children('ul')，而不是.find('ul')，這樣只會看直接子。

替代

這可能是我會怎麼做它，我做了一些小的改動所有（JS，HTML和CSS）：

JSFiddle

$('.dropdown').on("click", function (e) { 
    var cache = $(this).siblings('.opt'); 
    $('.opt:visible').not(cache).hide(); 
    cache.toggle(); 
});

來源

2014-07-08 19:37:12 smerny

非常感謝你。我不是故意挑剔，但是在你點擊菜單兩次（即切換）時，下拉菜單也會被隱藏，但是這對你的代碼似乎不起作用？ – Jimmy

@Jimmy，你可以使用'toggle（）'，我只是在測試某些東西的時候改變了它。我現在改回它了 – smerny

@Jimmy，我已經添加了一些註釋和建議。 – smerny

替代你可以使用這個：

$("ul.opt").addClass("hidden"); 
$('#filter > li > a').on("click", function (e) { 
    var cache = $(this).next().children(); 
    $('#filter ul:visible').not(cache).hide(); 
    cache.toggle(); 
});

fiddle

來源

2014-07-08 19:49:53

的Javascript下拉列表將不再工作

回答

相關問題