Question

我是初学程序员，所以这个问题可能有点简单。我在jQuery中使用以下代码在mouseclick操作之后从左到右简单地折叠列表：

$(initlist);
function initlist(){
  $('li:not(:has(ul))').css({cursor:'default','list-style-image':'none'});
  $('li:has(ul)')
    .click(collapse)
    .click()
    .css({cursor:'pointer','list-style-image':'url(plus.gif)'})
    .children().hide();
};
function collapse(event){
  if (this == event.target) {
    $(this).children().toggle();
    $(this).css('list-style-image',
                ($(this).children().is(':hidden')) ? 'url(plus.gif)' :url(minus.gif)');
  }
};
</script>

html是正常的无序列表，如下所示：

第1项
第2项
- 第4项
- 第5项
  - 第6项
    - 第8项
  - 第7项
第3项

现在我试图找到一种方法 - 不应用任何标签或更改html代码 - 使列表也可以从上到下折叠：默认情况下隐藏每个项目，然后逐个出现，例如键盘上单击向下箭头例如，项目1-5将与动作一起出现：向下 - 向下 - ＆gt;鼠标点击第2项 - ＆gt;降了下来。

我真的很感激任何帮助！

Answer 1

如果您可以使用锚标记将文本元素包装在列表中（如下所示），那么整个事情变得更加简单：

$('ul').hide()
$('li').contents()
        .filter(function(){return this.nodeType === 3})
        .wrap('<a>');

$('a').click(function() {
    $(this).next('ul').toggle()
})

在两个方向制作可折叠列表？

1 个答案: