Question

我有这段代码：http://jsfiddle.net/spadez/928Dj/39/

$("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中，我将form移到了ul之外，从我看到的javascript仍然有效但是当我点击链接时不再触发下拉列表。代码中的错误在哪里？

Answer 1

问题是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之后的所有兄弟姐妹。

如果您可能在ul下有多个form级别，则可能需要执行.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(); });

Answer 2

我刚刚将代码中的第3行替换为

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

Fiddle

Answer 3

替代方案你可以使用它：

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

Javascript下拉列表不再有效

3 个答案: