2

我最初有这个工作，但通过 W3C 验证器运行它，修复了错误，现在它不工作了。

我已经设置了一个jsfiddle

本质上，它是一堆嵌套的 ul 被用作下拉菜单，当单独单击时，会选择标题，显示嵌套 ul 中包含的信息。

但是由于将 ul 正确嵌套在 li 中，这无法正常工作，因此尝试了诸如 children/siblings/next 之类的选择器 - 均无济于事。这并不是说它们不起作用，只是我对使它们起作用的理解不够（显然！）。

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

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

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

我确定使用类似的东西：

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

应该可以工作，但我一生都无法正确解决。我猜这是因为它是嵌套的，我没有正确定位它，但是我的知识有限，截止日期也是如此。

我怎样才能相应地定位适当的 ul ？想知道是否有人可以帮助阐明并帮助我理解为什么这不起作用？

4

4 回答 4

3

尝试这个：

$(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那里。

于 2013-02-12T15:02:27.040 回答
1

无论我理解什么，我都制作了jsfiddle 。我认为。您希望slideToggle在当前打开时使用 next 和 prev 关闭。我也对html页面进行了更改。

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

  $(".featuresHeading").click(function() {
      $('ul.featureListings').not($(this).children('ul.featureListings')).slideUp();
    $(this).children('ul.featureListings').slideToggle(300);
    return false;
  });
于 2015-10-05T09:43:28.930 回答
0

利用.next()

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

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

于 2013-02-12T15:04:00.200 回答
0 

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

  $(".featuresHeading").click(function() {
    $('ul.featureListings', $(this).next()).slideToggle(300);
    return false;
  });
});
于 2013-02-12T15:08:48.447 回答