欣波微澜

用有限的资源换无限的体验

效果虽然粗糙,但胜在简单,仅通过css和js来实现

使用方法:编辑文章时,无序列表第一列用来填写识别字符,从第二列开始正常编辑内容即可,如:

- 树文档
- 这里才是第一列

实现方法

通过JS识别UL的第一列,识别通过后对当前UL进行处理:

  • 给当前UL添加树文档对应的选择器
  • 移除或隐藏用来识别的第一列
  • 给每一个有子列的li添加按钮
  • 给按钮绑定点击事件

更多设置同样可以在识别字符后面加上其他的字符,然后通过js识别出来进行后续的操作,如:

- 树文档 sole
- 这里才是第一列

当js判断出识别列中包含”sole“时,给当前UL再添加一个sole模式需要的选择器...


下面是本站完整的实现代码,唯一需要改的就是把.article>ul改成你主题正文UL所在位置

<style>
    .tools_tree{padding:0 0 0 42px;margin:0}
    .tools_tree p{padding:0;margin:0}
    .tools_tree li{padding:0;margin:0}
    .tools_tree li ul{padding:0 0 0 42px;margin:0 0 0 -12px;border-left:1px solid #ebebeb;display:none;}
    .tools_tree li .dot{float:left;margin:0 0 0 -35px;width:20px;cursor:pointer;user-select:none;background:url(/tools/tree/ico.show.svg) center 50% no-repeat;}
    .tools_tree li.open > ul{display:block;}
    .tools_tree li.open > .dot{background:url(tools/tree/ico.hide.svg) center 50% no-repeat;}
</style>
<script>
$(document).ready(function(){
    $(".article>ul").each(function(){
        $this = $(this);
        $html = $this.children("li:nth-child(1)").html();
        //识别树文档
        if($html.includes("树文档")){
            //标记树文档
            $this.addClass("tools_tree");
            $this.children("li:nth-child(1)").remove();
            //识别默认全部展开
            if($html.includes("all")){
                $this.find("li").addClass("open");
            }else{
                //识别首列展开
                if($html.includes("first")){
                    $this.find("li:nth-child(1)").addClass("open");
                }
                //标记sole模式
                if($html.includes("sole")){
                    $this.addClass("tools_tree_sole");
                }
            }
        }
    });
    //为每个有子列的li添加点击按钮
    $(".tools_tree li").each(function(){
        $this = $(this);
        if($this.children("ul").length){
            $this.prepend("<div class=dot>&nbsp;</div>");
        }
    });
    //点击动作
    $("li .dot").click(function(){
        $(this).parent().toggleClass("open");
    });
    //sole模式点击动作
    $(".tools_tree_sole li .dot").click(function(){
        if($(this).parent().hasClass("open")){
            $(this).parent().prevAll().removeClass("open");
            $(this).parent().nextAll().removeClass("open");
        }
    });
});
</script>
游客
  1. 换到后端php处理了

讨论 (1)

温馨提示

用有限的资源换无限的体验

本站已稳定运行14年26天

双击标题可以返回顶部

同款主题:点这里

京ICP备16065789号-5

-- Desined by vbolu --

Loading...