树状图形式的穿梭框

最新推荐文章于 2025-06-20 18:02:22 发布

郭豪杨

最新推荐文章于 2025-06-20 18:02:22 发布

阅读量1.4w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42603150/article/details/80999605

这篇博客主要展示了如何利用jQuery创建一个树状图形式的穿梭框，提供了相关的js和css文件引用。

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

废话少说直接上代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery轻量级树状菜单插件代码</title>
<link href="jquery.treemenu.css" rel="stylesheet" type="text/css">
<style>
*{list-style:none;border:none;}
body{font-family:Arial; }
.tree {  color:#46CFB0; float: left}
.tree li,
.tree li > a,
.tree li > span {
     margin: 2px;
    border-radius: 4px;
}

.tree li {
   color:#46CFB0;
    text-decoration: none;
    line-height: 20pt;
    border-radius: 4px;
}

.active1 {
    background-color: #34495E;
    color: white;
}

.active1 a {
    color: #fff;
}
  .tree{
    width: 166.5px;
    height: 300px;
    overflow-y:auto;
    border: 1px solid black;
  }
  .ul-ul-ul-ul{
    width: 166.5px;
    height: 300px;
    overflow-y:auto;
    border: 1px solid black;
    float: left;
    margin-left: 40px;
  }


</style>
</head>

<body>
<ul class="tree">
  <li> 一级
    <ul class="ul-li-ul-li">
      <li> Contact </li>
      <li> Blog </li>
      <li> Jobs </li>
    </ul>
  </li>
  <li> 一级
    <ul class="ul-li-ul-li">
      <li> file </li>
      <li> view </li>
      <li> code </li>
    </ul>
  </li>
  <li> 一级
    <ul class="ul-li-ul-li">
      <li> tools </li>
      <li> vcs </li>
      <li> help </li>
    </ul>
  </li>
  <li> 一级
    <ul class="ul-li-ul-li">
      <li> js </li>
      <li> css </li>
      <li> html </li>
    </ul>
  </li>
</ul>

<ul class="ul-ul-ul-ul">

</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js "></script> 
<script src="jquery.treemenu.js"></script>
<script>
$(function(){
        $(".tree").treemenu({delay:300}).openActive();
    });
</script>

<script>
    $('.ul-li-ul-li').on("click","li",function(){
       console.log($(this).parents('.treemenu > li').index())
       var index=$(this).parents('.treemenu > li').index()
       $(this).attr("data_id",index)
       console.log($(this).attr("data_id"))
       $(this).remove()
       $(".ul-ul-ul-ul").append($(this))
    });
    $('.ul-ul-ul-ul').on("click","li",function(){
        console.log($(this).attr("data_id"))
        $(".ul-li-ul-li").eq($(this).attr("data_id")).append($(this))
       
    })
</script>

</body>
</html>

jquery.treemenu.js

(function($){
    $.fn.openActive = function(activeSel) {
        activeSel = activeSel || ".active1";

        var c = this.attr("class");

        this.find(activeSel).each(function(){
            var el = $(this).parent();
            while (el.attr("class") !== c) {
                if(el.prop("tagName") === 'UL') {
                    el.show();
                } else if (el.prop("tagName") === 'LI') {
                    el.removeClass('tree-closed');
                    el.addClass("tree-opened");
                }

                el = el.parent();
            }
        });

        return this;
    }

    $.fn.treemenu = function(options) {
        options = options || {};
        options.delay = options.delay || 0;
        options.openActive = options.openActive || false;
        options.activeSelector = options.activeSelector || "";

        this.addClass("treemenu");
        this.find("> li").each(function() {
            e = $(this);
            var subtree = e.find('> ul');
            var button = e.find('span').eq(0).addClass('toggler');

            if( button.length == 0) {
                var button = $('<span>');
                button.addClass('toggler');
                e.prepend(button);
            } else {
                button.addClass('toggler');
            }

            if(subtree.length > 0) {
                subtree.hide();

                e.addClass('tree-closed');

                e.find(button).click(function() {
                    var li = $(this).parent('li');
                    li.find('> ul').slideToggle(options.delay);
                    li.toggleClass('tree-opened');
                    li.toggleClass('tree-closed');
                    li.toggleClass(options.activeSelector);
                });

                $(this).find('> ul').treemenu(options);
            } else {
                $(this).addClass('tree-empty');
            }
        });

        if (options.openActive) {
            this.openActive(options.activeSelector);
        }

        return this;
    }
})(jQuery);

jquery.treemenu.css

.treemenu li { list-style: none; }

.treemenu .toggler {
    cursor: pointer;
}

.treemenu .toggler:before {
    display: inline-block;
    margin-right: 2pt;
}

li.tree-empty > .toggler { color: #aaa; }
li.tree-empty > .toggler:before { content: "\2212"; }
li.tree-closed > .toggler:before { content: "+"; }
li.tree-opened > .toggler:before { content: "\2212"; }