菜单完结篇-CSDN博客

本文链接：https://blog.csdn.net/qq_50145597/article/details/137757294

本文详细描述了对jQuery文件菜单的二次开发，主要包括bug修复，如isfile判断问题和创建文件/文件夹逻辑混乱，以及功能增强，如动态切换图标、创建按钮管理和输入转span等。

摘要由CSDN通过智能技术生成

上一篇:jquery文件菜单拓展《二》-CSDN博客

bug修复

上次的变量isfile无法进行判断，导致文件也能创建，因为每次点击都要判断一次。所以这样改。

function closeAndOpen(){
    let _this;
    var isCreatSpan;
    //var isfile =$(this).hasClass("glyphicon-file");
    $body.on("click contextmenu",".menu-ul li span",function (e) {
      isCreatSpan = $(this).hasClass("menu-span");
      var children = $(this).parent().children(".menu-ul");
      if (e.type==="click" && !($(this).hasClass("glyphicon-file"))){
        //console.log($(this))
        if (isCreatSpan){
          children.toggle(500);
          e.stopPropagation();
          $(this).toggleClass(function (){
            if ($(this).is("menu-span glyphicon-folder-close")){
              return "menu-span glyphicon-folder-close ";
            }
            return "glyphicon-folder-open";});
        }
      }

      if (e.type==="contextmenu" &&!($(this).hasClass("glyphicon-file")) && isCreatSpan){
        e.preventDefault();
        var position = $(this).offset();
        $opr.css({
             top:position.top+"px",
             left:(position.left*(1.1))+"px"
                }).fadeIn(100);
       // console.log(children.attr('class'));
        _this=$(this);
        //默认隐藏创建按钮
        $(document).one("click", function(){
            $opr.hide();
        });
        e.stopPropagation();
      }
    });

    $oprli.on("click",function () {
      var parent = _this.parent();
      var children = parent.children("ul");

      if (!$(this).children().attr("id")){
        children = parent;
      }
      if ($(this).children().attr("id")==="file"){
        console.log(1)
        oprShow(children,parent,"新建文件");
        oprSpan("glyphicon-file");
      }
      if ($(this).children().attr("id")==="folder"){
        console.log(2)
        oprShow(children,parent,"新建文件夹");
        oprSpan("glyphicon-folder-close");
        //e.stopPropagation();
      }
    });
  }

另外一个bug可能是创建文件和文件夹出现混乱问题，原因是有些函数无法将fileClass参数传递进去。那么我就用html储存了下

<div class="parent">
  <ul class="parent_ul" style="background-color: whitesmoke; width: 20%"></ul>
</div>
<ul class="opr">
  <!--添加文件的按钮-->
  <li><span class="opr-span glyphicon glyphicon-file" id="file"></span></li>
  <!--添加文件夹的按钮-->
  <li><span class="opr-span glyphicon glyphicon-folder-close" id="folder"></span></li>
</ul>
<input class="file-type" type="hidden">
<head class="panelBar" th:replace="/common/public/footer::footer"></head>

每次点击都会记录创建格式，通过格式变成不同的span，删除原本的input变成span的函数。

function oprSpan(fileClass){
    $(".file-type").val(fileClass);
    //删除
    $body.on("click",".new-li-delete",function () {
      $(this).parent("li").remove();
    });
    //保存
    $body.on("click",".new-li-save",function () {
      //ajax请求接口，后端验证之后
      if ("glyphicon-file"=== $(".file-type").val()){
        $(this).parent("li").children("input").replaceWith(function() {
            //console.log("<span class='"+$(this).attr("class")+" menu-span glyphicon  glyphicon-file opr-span-reset  '></span>")
          var obj =$("<span class='"+$(this).attr("class")+" menu-span glyphicon  glyphicon-file opr-span-reset  '></span>");
          return obj.text($(this).val());
        });
      }else {
        $(this).parent("li").children("input").replaceWith(function() {
            //console.log("<span class='"+$(this).attr("class")+" menu-span glyphicon  glyphicon-folder-close opr-span-reset  '></span>")
          var obj =$("<span class='"+$(this).attr("class")+" menu-span glyphicon  glyphicon-folder-close opr-span-reset  '></span>");
          return obj.text($(this).val());
        });
      }
     //if (obj && obj.parent("li")){
       $(this).parent("li").find(".new-li-file").hide();
    // }
    });
  }

不足之处，请大家留言