首页 / 技术问答 / Html问答列表 / 问答详情

Html 在移动屏幕上显示时分支树视图的响应能力问题

    $.fn.extend({
        treed: function (o) {

          var openedClass = 'fa-minus-circle';
          var closedClass = 'fa-plus-circle';

          if (typeof o != 'undefined'){
            if (typeof o.openedClass != 'undefined'){
            openedClass = o.openedClass;
            }
            if (typeof o.closedClass != 'undefined'){
            closedClass = o.closedClass;
            }
          };

            //initialize each of the top levels
            var tree = $(this);
            tree.addClass("tree");
            tree.find('li').has("ul").each(function () {
                var branch = $(this); //li with children ul
                branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
                branch.addClass('branch');
                branch.on('click', function (e) {
                    if (this == e.target) {
                        var icon = $(this).children('i:first');
                        icon.toggleClass(openedClass + " " + closedClass);
                        $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>");         
                          setTimeout(()=>{
                            $(this).find('.loading').remove();
                            $(this).children().children().slideToggle(400);
                          }, 400)
                    }
                })
                branch.children().children().toggle();
            });
            //fire event from the dynamically added icon
          tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
          });
            //fire event to open branch if the li contains an anchor instead of text
            tree.find('.branch>a').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
            //fire event to open branch if the li contains a button instead of text
            tree.find('.branch>button').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
        }
    });

    //Initialization of treeviews

    $('#tree1').treed();
$.fn.extend({
  treed: function (o) {

    var openedClass = 'fa-minus-circle';
    var closedClass = 'fa-plus-circle';

    if (typeof o != 'undefined'){
      if (typeof o.openedClass != 'undefined'){
      openedClass = o.openedClass;
      }
      if (typeof o.closedClass != 'undefined'){
      closedClass = o.closedClass;
      }
    };

//initialize each of the top levels
      var tree = $(this);
      tree.addClass("tree");
      tree.find('li').has("ul").each(function () {
          var branch = $(this); //li with children ul
          branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
          branch.addClass('branch');

          // declare a flag to toggle
          let flag = false;
          branch.on('click', function (e) {
              if (this == e.target) {
                  // toggle on click
                  flag = !flag;
                  var icon = $(this).children('i:first');
                  icon.toggleClass(openedClass + " " + closedClass); 

                  // show loader only when its opened, and collpase once toggled   
                  if(flag) {
                    $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>"); 
                    setTimeout(()=>{
                      $(this).find('.loading').remove();
                      $(this).children().children().slideToggle(400);
                    }, 400)
                  } else {
                    $(this).children().children().slideToggle(400);
                  }
              }
          })
          branch.children().children().toggle();
      });

//fire event from the dynamically added icon
    tree.find('.branch .indicator').each(function(){
      $(this).on('click', function () {
          $(this).closest('li').click();
      });
    });
      //fire event to open branch if the li contains an anchor instead of text
      tree.find('.branch>a').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
          });
      });
      //fire event to open branch if the li contains a button instead of text
      tree.find('.branch>button').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
              });
          });
      }
    });
    
    //Initialization of treeviews
    
    $('#tree1').treed();
    
    $('#tree2').treed({openedClass:'fa-folder-open', closedClass:'fa-folder'});
    .tree, .tree ul {
      margin:0;
      padding:0;
      list-style:none;
      margin-left:10px;
    }
    .tree ul {
      margin-left:1em;
      position:relative
    }
    .tree ul ul {
      margin-left:.5em
    }
    .tree ul:before {
      content:"";
      display:block;
      width:0;
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      border-left:1px solid
    }
    .tree li {
      margin:0;
      padding:0 1em;
      line-height:2em;
      color:#369;
      font-weight:700;
      position:relative;
    }
    .tree ul li:before {
      content:"";
      display:block;
      width:10px;
      height:0;
      border-top:1px solid;
      margin-top:-1px;
      position:absolute;
      top:1em;
      left:0
    }
    .tree ul li:last-child:before {
      background:#fff;
      height:auto;
      top:1em;
      bottom:0
    }
    .indicator {
      margin-right:5px;
    }
    .tree li a {
      text-decoration: none;
      color:#369;
    }
    .tree li button, .tree li button:active, .tree li button:focus {
      text-decoration: none;
      color:#369;
      border:none;
      background:transparent;
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;
      outline: 0;
    }

    .loading {
      font-style: italic;
    }
.timeline {
  border-left: 1px solid hsl(0, 0%, 90%);
  position: relative;
  list-style: none;
}

.timeline .timeline-item {
  position: relative;
}

.timeline .timeline-item:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .timeline-item:after {
  background-color: hsl(0, 0%, 90%);
  left: -38px;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";

}
  

<section class="content">


  <div class="container-fluid">


  <div class="card">


    <div class="card-body">              


      <div class="row">


        <div class="col-md-4">


        <ul id="tree2">


          <li>


          <a href="#">TECH</a>


          <ul>


            <li>Company Maintenance</li>


            <li>


              Employees


              <ul>


                <li>


                Reports


                <ul>


                  <li>Report1


                  <ul>


                  <li>Report1


                  <ul>


                  <li>Report1


                  <ul>


                  <li>Report1</li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                </li>


                <li>Employee Maint.</li>


              </ul>


            </li>


            <li>Human Resources</li>


          </ul>


          </li>


             </ul>


      </div>        


      </div>


   </div>


  <div class="card-footer text-body-secondary">


</div> 


</div>  <!-- /.container-fluid -->


   </section>


                    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.rtl.min.css">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

I have a treeview with several internal branches that work well on large computer screens, but the problem I am facing is that when I display it on mobile phone screens, it appears very poorly and completely uncoordinated. The letters also appear very fragmented and irregular. Please help me with the necessary formatting and adjustments to make the treeview work smoothly on mobile screens. I will include the captured images when displayed on computer screens and mobile screens to show the problem I am facing. desktop mobile

推荐答案

显然，它不适合屏幕，所以您可以将其设置为一个带有溢出的可滚动容器(对于tree个容器)，并且没有文本换行(对于branch个容器):

.tree {
  overflow-x: auto;
}

.branch {
  white-space: nowrap;
}


$.fn.extend({
        treed: function (o) {

          var openedClass = 'fa-minus-circle';
          var closedClass = 'fa-plus-circle';

          if (typeof o != 'undefined'){
            if (typeof o.openedClass != 'undefined'){
            openedClass = o.openedClass;
            }
            if (typeof o.closedClass != 'undefined'){
            closedClass = o.closedClass;
            }
          };

            //initialize each of the top levels
            var tree = $(this);
            tree.addClass("tree");
            tree.find('li').has("ul").each(function () {
                var branch = $(this); //li with children ul
                branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
                branch.addClass('branch');
                branch.on('click', function (e) {
                    if (this == e.target) {
                        var icon = $(this).children('i:first');
                        icon.toggleClass(openedClass + " " + closedClass);
                        $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>");         
                          setTimeout(()=>{
                            $(this).find('.loading').remove();
                            $(this).children().children().slideToggle(400);
                          }, 400)
                    }
                })
                branch.children().children().toggle();
            });
            //fire event from the dynamically added icon
          tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
          });
            //fire event to open branch if the li contains an anchor instead of text
            tree.find('.branch>a').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
            //fire event to open branch if the li contains a button instead of text
            tree.find('.branch>button').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
        }
    });

    //Initialization of treeviews

    $('#tree1').treed();
$.fn.extend({
  treed: function (o) {

    var openedClass = 'fa-minus-circle';
    var closedClass = 'fa-plus-circle';

    if (typeof o != 'undefined'){
      if (typeof o.openedClass != 'undefined'){
      openedClass = o.openedClass;
      }
      if (typeof o.closedClass != 'undefined'){
      closedClass = o.closedClass;
      }
    };

//initialize each of the top levels
      var tree = $(this);
      tree.addClass("tree");
      tree.find('li').has("ul").each(function () {
          var branch = $(this); //li with children ul
          branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
          branch.addClass('branch');

          // declare a flag to toggle
          let flag = false;
          branch.on('click', function (e) {
              if (this == e.target) {
                  // toggle on click
                  flag = !flag;
                  var icon = $(this).children('i:first');
                  icon.toggleClass(openedClass + " " + closedClass); 

                  // show loader only when its opened, and collpase once toggled   
                  if(flag) {
                    $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>"); 
                    setTimeout(()=>{
                      $(this).find('.loading').remove();
                      $(this).children().children().slideToggle(400);
                    }, 400)
                  } else {
                    $(this).children().children().slideToggle(400);
                  }
              }
          })
          branch.children().children().toggle();
      });

//fire event from the dynamically added icon
    tree.find('.branch .indicator').each(function(){
      $(this).on('click', function () {
          $(this).closest('li').click();
      });
    });
      //fire event to open branch if the li contains an anchor instead of text
      tree.find('.branch>a').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
          });
      });
      //fire event to open branch if the li contains a button instead of text
      tree.find('.branch>button').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
              });
          });
      }
    });
    
    //Initialization of treeviews
    
    $('#tree1').treed();
    
    $('#tree2').treed({openedClass:'fa-folder-open', closedClass:'fa-folder'});
.tree {
  overflow-y: auto;
}
.branch {
  white-space: nowrap;
}

.tree, .tree ul {
      margin:0;
      padding:0;
      list-style:none;
      margin-left:10px;
    }
    .tree ul {
      margin-left:1em;
      position:relative
    }
    .tree ul ul {
      margin-left:.5em
    }
    .tree ul:before {
      content:"";
      display:block;
      width:0;
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      border-left:1px solid
    }
    .tree li {
      margin:0;
      padding:0 1em;
      line-height:2em;
      color:#369;
      font-weight:700;
      position:relative;
    }
    .tree ul li:before {
      content:"";
      display:block;
      width:10px;
      height:0;
      border-top:1px solid;
      margin-top:-1px;
      position:absolute;
      top:1em;
      left:0
    }
    .tree ul li:last-child:before {
      background:#fff;
      height:auto;
      top:1em;
      bottom:0
    }
    .indicator {
      margin-right:5px;
    }
    .tree li a {
      text-decoration: none;
      color:#369;
    }
    .tree li button, .tree li button:active, .tree li button:focus {
      text-decoration: none;
      color:#369;
      border:none;
      background:transparent;
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;
      outline: 0;
    }

    .loading {
      font-style: italic;
    }
.timeline {
  border-left: 1px solid hsl(0, 0%, 90%);
  position: relative;
  list-style: none;
}

.timeline .timeline-item {
  position: relative;
}

.timeline .timeline-item:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .timeline-item:after {
  background-color: hsl(0, 0%, 90%);
  left: -38px;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";

}
<section class="content">


  <div class="container-fluid">


  <div class="card">


    <div class="card-body">              


      <div class="row">


        <div class="col-md-4">


        <ul id="tree2">


          <li>


          <a href="#">TECH</a>


          <ul>


            <li>Company Maintenance</li>


            <li>


              Employees


              <ul>


                <li>


                Reports


                <ul>


                  <li>Report1


                  <ul>


                  <li>Report1


                  <ul>


                  <li>Report1


                  <ul>


                  <li>Report1</li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                </li>


                <li>Employee Maint.</li>


              </ul>


            </li>


            <li>Human Resources</li>


          </ul>


          </li>


             </ul>


      </div>        


      </div>


   </div>


  <div class="card-footer text-body-secondary">


</div> 


</div>  <!-- /.container-fluid -->


   </section>


                    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.rtl.min.css">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

Html相关问答推荐

如何防止下拉菜单内的Bootstrap列表行包装？

在iOS中调整HTML邮箱内容的大小

为什么前端框架可以创建自定义属性，而我却被期望在挖掘之前添加数据

在悬停时应用文本装饰

如何将内容元素放在侧边栏旁边？

OnChange函数未在下拉列表中使用一个选项触发

<nav和button是姐妹元素.当添加了导航活动类时，我如何为按钮编写CSS？

带有图标和悬停过渡的CSS按钮

如何 Select 表格'；TMS Web Core中的body html元素？

如何在小屏幕中制作水平滚动div

Angular MatBadge 在高于 99 时不显示完整数字

图像如何能达到 HTML 表格的全宽？

这两个CSS中的网格居中对齐内部盒子有什么区别？

CSS flex：0 0 auto创建了1像素的间隙

Tailwind：父母动态适应子元素的身高

重点/主动输入的概述问题

CSS：第一个类型的伪类没有按预期工作

使用 TailwindCSS 将徽标放在左上角，将菜单放在右上角

Header 或 P 标记中的填充不能与 em 单元一起正常工作

为什么相同持续时间的转换需要不同的时间？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630