第一次显示时, 3.2  和 4.2 为什么显示加号,应该是减号才对啊? 书上例子代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
</style>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">
       $(function(){
        $('li:has(ul)')
          .click(function(event){
            if (this == event.target) {
              $(this).children().toggle();
              $(this).css('list-style-image',
                ($(this).children().is(':hidden')) ?
                  'url("http://maps.gstatic.cn/intl/zh-CN_cn/mapfiles/iw_plus.gif")' : 'url("http://www.finaid.wisc.edu/themes/finaid/images/v1/minus.gif")');
            }
            return false;
          })
          .css('cursor','pointer')
          .click();
        $('li:not(:has(ul))').css({
          cursor: 'default',
          'list-style-image':'none'
        });
        
       
      });    </script></head>
<body>
    <fieldset>
      <legend>Collapsible List &mdash; Take 2</legend>
      <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>
    </fieldset></body>
</html>

解决方案 »

  1.   

    呵呵,显示没错滴,
    “+”表示 expand,即展开节点,
    “-”表示 collapse,即收缩节点。第一次显示时,3.2 和 4.2 都收缩状态,当然应该显示“+”,即可以展开!不懂 jquery,但感觉应该是
    $(this).children().toggle();
    使得初始状态的节点都收缩起来了。
      

  2.   

    找了一个在线的 jquery.js 引用,例子可以直接看了L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <style type="text/css">
        </style>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>    <script type="text/javascript">
           $(function(){
            $('li:has(ul)')
              .click(function(event){
                if (this == event.target) {
                  $(this).children().toggle();
                  $(this).css('list-style-image',
                    ($(this).children().is(':hidden')) ?
                      'url("http://maps.gstatic.cn/intl/zh-CN_cn/mapfiles/iw_plus.gif")' : 'url("http://www.finaid.wisc.edu/themes/finaid/images/v1/minus.gif")');
                }
                return false;
              })
              .css('cursor','pointer')
              .click();
            $('li:not(:has(ul))').css({
              cursor: 'default',
              'list-style-image':'none'
            });
            
           
          });    </script></head>
    <body>
        <fieldset>
          <legend>Collapsible List &mdash; Take 2</legend>
          <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>
        </fieldset></body>
    </html>