Question

我最初使用它，但通过W3C验证器运行，修复了错误，现在它无法正常工作。

我设置了 jsfiddle

基本上，它是一堆嵌套的ul用作下拉列表，标题是单独点击时显示嵌套ul中包含的信息。

但是由于将ul正确嵌套在li中，这无法正常工作，尝试过选择器如子/兄弟/下一个 - 都无济于事。这并不是说它们不会起作用，只是因为我不了解它们（显然！）。

此代码使所有列表一次滑动切换，但我想单独控制它们。

$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $('ul.featureListings').slideToggle(300);
    return false;
  });
});

我确定使用类似的东西：

$(this).next('.featureListings').slideToggle(300);

应该有效，但我不能为我的生活做好准备。我猜这是因为它是嵌套的，我没有正确地定位它，但是我的知识在截止日期前是有限的。

如何相应地定位相应的ul？想知道是否有人可以帮助我解释为什么这不起作用？

Answer 1

试试这个：

$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $(this).next("li").children('ul.featureListings').slideToggle(300);
    return false;
  });
});

你只需要以正确的方式移动DOM。你想要移动到下一个li（.next（“li”）），然后进入它的一个子节点（.children（'ul.featureListings'））然后触发slideToggle。

Answer 2

无论我理解什么，我已经 jsfiddle 。我认为。你想要slideToggle下一个，并且当前打开时接近上一个。我也在html页面上进行了更改。

 $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
      $('ul.featureListings').not($(this).children('ul.featureListings')).slideUp();
    $(this).children('ul.featureListings').slideToggle(300);
    return false;
  });

Answer 3

使用.next()

$(this).next().find('ul.featureListings').slideToggle(300);

在这里演示http://jsfiddle.net/heE6J/4/

Answer 4


$(function(){
  $("ul.featureListings").hide();

  $(".featuresHeading").click(function() {
    $('ul.featureListings', $(this).next()).slideToggle(300);
    return false;
  });
});

jQuery slideToggle嵌套ul li

4 个答案: