JQuery【树形菜单——渐现】

最新推荐文章于 2024-05-10 09:39:31 发布

一直在冬眠

最新推荐文章于 2024-05-10 09:39:31 发布

阅读量891

点赞数

分类专栏： JavaScript/JQuery 文章标签： jquery function url

本文链接：https://blog.csdn.net/wjr_loves/article/details/7865143

版权

JavaScript/JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树形菜单——渐现</title>
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
    <style>
      fieldset { width: 320px }
    </style>
</head>
<body>
<fieldset>
      <legend>A班班级人员表</legend>
      <ul>
         <li>
          一组
          <ul>
            <li>组长
             <ul>
                 <li>AAAA</li>
                </ul>
            </li>
            <li>
             组员
              <ul>
                <li>BBBB</li>
                <li>CCCC</li>
                <li>DDDD</li>
                <li>EEEE</li>
              </ul>
            </li>
          </ul>
        </li>
         <li>
          二组
          <ul>
            <li>组长
             <ul>
                 <li>FFFF</li>
                </ul>
            </li>
            <li>
             组员
              <ul>
                <li>GGGG</li>
                <li>HHHH</li>
                <li>IIII</li>
                <li>JJJJ</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          三组
          <ul>
            <li>组长
             <ul>
                 <li>KKKK</li>
                </ul>
            </li>
            <li>
             组员
              <ul>
                <li>LLLL</li>
                <li>MMMM</li>
                <li>NNNN</li>
                <li>OOOO</li>
              </ul>
            </li>
          </ul>
        </li>
         <li>
          四组
          <ul>
            <li>组长
             <ul>
                 <li>PPPP</li>
                </ul>
            </li>
            <li>
             组员
              <ul>
                <li>QQQQ</li>
                <li>RRRR</li>
                <li>SSSS</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </fieldset>
</body>
</html>

一直在冬眠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery【树形菜单——渐现】

$(function(){ $('li:has(ul)') .click(function(event){ if (this == event.target) { $(this).css('list-style-image', (!$(this).children().is(':
复制链接

扫一扫