jQuery 展开和折叠列表答案

【问题标题】：jQuery Expanding & Collapsing listsjQuery 展开和折叠列表
【发布时间】：2009-01-15 17:56:22
【问题描述】：

代码展开和折叠一个列表，其中列表项可以有子列表。重构此代码的任何想法 - 尤其是切换部分。有必要在这里使用闭包吗？

$(function()
{
    $('li:has(ul)')
    .click(function(event){
        if (this == event.target) 
        {
            var that = this;
            $('li:has(ul)').children().filter(':not(:hidden)').parent().each(function(x){
                if(this != that)
                    toggleList(this);
            });
            toggleList(this);
        }
    })
    .css({cursor:'pointer', 'list-style-image':'url(plus.gif)'})
    .children().hide();

    $('li:not(:has(ul))').css({cursor: 'default', 'list-style-image':'none'});
}); 
function toggleList(L)
{
    $(L).css('list-style-image', (!$(L).children().is(':hidden')) ? 'url(plus.gif)' : 'url(minus.gif)');
    $(L).children().toggle('fast');
}

编辑：

该脚本适用于以下 HTML sn-p（来源：jQuery in Action）。实际上，我试图扩展书中给出的脚本。

      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>
          Item 3
          <ul>
            <li>Item 3.1</li>
            <li>
              Item 3.2
              <ul>
                <li>Item 3.2.1</li>
                <li>Item 3.2.2</li>
                <li>Item 3.2.3</li>
              </ul>
            </li>
            <li>Item 3.3</li>
          </ul>
        </li>
        <li>
          Item 4
          <ul>
            <li>Item 4.1</li>
            <li>
              Item 4.2
              <ul>
                <li>Item 4.2.1</li>
                <li>Item 4.2.2</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>Item 5</li>
      </ul>

【问题讨论】：

这样那样那样，这样那样那样！
如果您能添加一个 HTML 示例，这将有助于您的问题。

标签： javascript jquery coding-style

【解决方案1】：

您的代码在 Safari 中对我不起作用。当我点击一个子列表时，顶部列表被切换。

怎么样：

$(document).ready(function() {
  $('li:has(ul)').click(function(event) {
    $(this).css('list-style-image', $(this).children().is(':hidden') ? 'url(minus.gif)' : 'url(plus.gif)')
    $(this).children().toggle('fast')
    return false
  })
  .css({cursor:'pointer', 'list-style-image':'url(plus.gif)'})
  .children().hide()

  $('li:not(:has(ul))').click(function(event) { return false })
  .css({cursor:'default', 'list-style-image':'none'})
})

【讨论】：