JQuery【树形菜单】

最新推荐文章于 2021-12-02 17:21:39 发布

一直在冬眠

最新推荐文章于 2021-12-02 17:21:39 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/wjr_loves/article/details/7865194

JavaScript/JQuery 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何利用JQuery库创建交互式的树形菜单。通过实例代码和步骤解析，展示了如何动态加载数据，设置点击事件以及实现菜单的展开与折叠功能。适合对网页前端开发感兴趣的读者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

HTML代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树形菜单</title>
</head>
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
    <style>
      fieldset { width: 320px }
    </style>
<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>