javascript - 当ul变得大于屏幕尺寸时需要在ul上添加overflow-x滚动

问题描述

请运行我的代码。在这里，当单击 li 时，将打开一个新的 div。起初，只有一里。当我单击一个 li 时，该 li 旁边会打开一个新的 div。我想连续完成所有这些。它应该是一个水平滚动。但是当达到最大屏幕尺寸时它会中断。我该如何解决？

  function childData(_id) {
             var tRow = $(".organogram li").length,
              row = parseInt(_id)+1;
             for (var i = row; i <= tRow; i++) {
                 $("#dept-"+i).remove();
             }
             var data =  "<li id='dept-"+row+"' class='team'>"
         
             +"<div class='data'><ul> "
             +"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher1</p><p>Designation</p></div></a> </li>"
             +"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher2</p><p>Designation</p></div></a> </li>"
             +"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher3</p><p>Designation</p></div></a> </li>"
             +"</ul> </div></li>";
             $(".organogram").append(data);
         }
         function thisNode(_this){
             var _id = $(_this).closest(".team").attr("id").match(/\d+/);
         
             $(_this).closest("ul").find("li").removeClass( "active" );
             $(_this).addClass( "active" );
         
         $(_this).closest("ul").prepend($(_this));
             childData(_id);
         }

ul{
 padding:0px;
 list-style-type: none;
 }
 .data {
 border: 1px solid;
 margin: 5px;
 float: left;
 width: 13%;
 }
 .data a{
 text-decoration: none;
 }
 .data ul{
 list-style-type: none;
 }
 .profile{
 height: 40px;
 width: 40px;
 float: left;
 margin: 0px 13px;
 }
 .details{
 font-size: 13px;
 }
 li.title {
 border-bottom: 2px solid #ddd;
 overflow: hidden;
 margin-bottom: 5px;
 padding: 5px 0;
 }
 .active{
 background:#ececec;
 }
 p{
 margin:0px;
 padding: 0px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
         <ul class="organogram">
            <li id='dept-1' class='team'>
               <div class='data'>
                  <ul>
                     <li class='title' onclick='thisNode(this)'>
                        <a href='#'>
                           <img src='img/1.jpg' class='profile' >
                           <div class='details'>
                              <p>Tusher1</p>
                              <p>Designation</p>
                           </div>
                        </a>
                     </li>
                     <li class='title' onclick='thisNode(this)'>
                        <a href='#'>
                           <img src='img/1.jpg' class='profile' >
                           <div class='details'>
                              <p>Tusher2</p>
                              <p>Designation</p>
                           </div>
                        </a>
                     </li>
                     <li class='title' onclick='thisNode(this)'>
                        <a href='#'>
                           <img src='img/1.jpg' class='profile' >
                           <div class='details'>
                              <p>Tusher3</p>
                              <p>Designation</p>
                           </div>
                        </a>
                     </li>
                  </ul>
               </div>
            </li>
         </ul>
      </div>

标签： javascriptjquerycss

javascript - 当ul变得大于屏幕尺寸时需要在ul上添加overflow-x滚动

问题描述

解决方案

推荐阅读