javascript - 使用 jscript 级联(从上到下)div 的组织结构

标签 javascript html css

我不是开发人员，这是我的第一篇帖子，寻求帮助以指导我应该首先了解哪些技术，所以请保持温和。至少我想了解该方法是否适合目标。

在最后的观点中，我希望从数据库中创建一个组织结构。每个员工至少有 1 个直接经理来形成一棵树，他的卡片也填充了额外的数据。

我目前面临的问题是，我不明白如何同时扩展 level2 div(子部门)。下面不展开其他的。

  $(document).ready(function(){
$(".level1_div").click(function(){
$(".level2_div").slideUp();
$(".level3_div").slideUp();
$(".level4_div").slideUp();
$(this).next().show("slow");
    });

$(".level2_div").click(function(){
$(".level4_div").slideUp();
    $(this).next().slideToggle("slow");
  });
  
  $(".level3_div").click(function(){
    $(this).next().slideToggle("slow")();
  });
    });
.wrapper {
  background-color: lightblue;
  padding: 5px;
  margin: auto;
  display: table;
  font-size: 8px;
  margin-top:50px;
  border:1px solid #000000;
  border-radius:6px;
  }

.level1_div {
color: gainsboro;
	margin-top:2px;
	background-color:#666666;
	width:300px;
	padding:1px;
	border:2px solid #000000;
	border-radius:4px;
	position:relative;
	
}
.level2_div {
color: gainsboro;
	width:295px;
	margin-left:5px;
	margin-top:2px;
	margin-bottom:2px;
	border:2px solid #000000;
	padding:1px;
	display:none;
	border-radius:4px;
	background-color:#666666;
	
}

.level3_div {
color: gainsboro;
	width:290px;
    margin-left:10px;
    margin-top:2px;
	margin-bottom:2px;
	border:2px solid #000000;
	padding:1px;
	display:none;
	border-radius:4px;
	background-color:#666666;
}

.level4_div {
color: gainsboro;
	width:285px;
  margin-left:15px;
  margin-top:2px;
	margin-bottom:2px;
	border:2px solid #000000;
	padding:1px;
	display:none;
	border-radius:4px;
	background-color:#666666;
}

  .postitle {
  color: gainsboro;
  width:55%;
  display:inline-block;
  margin:1px;
  }
  
    .department {
  color: gainsboro;
  display:inline-block;
  width:55%;
  margin:1px;
    }
  
   .fullname {
  color: gainsboro;
  width:113px;
  display:inline-block;
   margin:1px;
   float:right;
   }  
   
   .category {
  color: gainsboro;
  width:113px;
  display:inline-block;
  margin:1px;
  float:right;
     }  
	 
	 .search {
  color: black;
  background-color:silver;
  width:100px;
  margin:1px;
  margin-left:10%;
  position:relative;
  border-radius:5px;
  padding: 2px;
  border:0.5px solid #000000;
  display:inline-block;
     }  
<!DOCTYPE html>
<html>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>
<!-- Start your code here -->
<div class="wrapper">

 <div class="search"> Search people... </div>
 <div class="search"> Search skill... </div>
 
 
<div class="level1_div">
			<div class="department"> Department </div>
			<div class="fullname"> Full name</div>
			<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
			<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
</div>

<div class="level2_div">
			<div class="department"> Sub-Department </div>
			<div class="fullname"> Full name</div>
			<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
			<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
</div>

<div class="level2_div">
			<div class="department"> Sub-Department </div>
			<div class="fullname"> Full name</div>
			<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
			<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
</div>
			
<div class="level3_div">
			<div class="department"> Branch </div>
			<div class="fullname"> Full name</div>
			<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
			<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
</div>

<div class="level4_div">
			<div class="department"> Sub-branch </div>
			<div class="fullname"> Full name</div>
			<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
			<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
</div>

<div class="level1_div">
			<div class="department"> Department </div>
			<div class="fullname"> Full name</div>
			<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
			<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>

<div class="level1_div">
			<div class="department"> Department </div>
			<div class="fullname"> Full name</div>
			<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
			<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>

<div class="level1_div">
			<div class="department"> Department </div>
			<div class="fullname"> Full name</div>
			<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
			<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
</div>
<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>

<div class="level1_div">	
			<div class="department"> Department </div>
			<div class="fullname"> Full name</div>
			<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
			<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
</div>

<div class="level2_div">Level 2</div>
<div class="level3_div">Level 3</div>
<div class="level4_div">Level 4</div>

</div>
    
<!-- End yo</p>code here -->
</body>
</html>

最佳答案

这适合你吗？

基本上我已经稍微改变了树结构以便递归，在这个过程中减少了 CSS 和 JS。我们现在有一个 .node 类，而不是 .level1、.level2、.leveln 类

.node {
    width: 100% !important;
    padding-top: 2px;
    position: relative; 
}

.node-content {
    color: gainsboro;
    background-color: #666666;
    border: 2px solid #000000;
    border-radius: 4px;
    width: 100%;
    padding: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.node-children {
    padding: 0 0 0 2px;
}

<div class="node" collapsed="true">
  <div class="node-content">
    Content goes here
  </div>
  <div class="node-children">
    Nested Nodes goes here
  </div>
</div>

这是最终版本

$(document).ready(function() {
    $('.node[collapsed] .node').slideUp();
    
    /**
     * Instead of using: 
     * > $('.node').click(function...)
     * 
     * We can use:
     * > $('.wrapper').on('click', '.node', function...)
     *
     * This will allow any .node element inside .wrapper to listen
     * to the event (event if it wasn't in the DOM when this event
     * was binded)
     **/
    
    $('.wrapper').on('click', '.node', function(event) {
        var $self = $(this),
            $children = $self.find('> .node-children > .node'),
            $neighbours = $self.parent().children('.node').not($self),
            $others = $self.parent().find('.node').not($self);
        
        if ($self.attr('collapsed')) {
            $self.removeAttr('collapsed');
            $others.attr('collapsed', true).not($neighbours).slideUp();
            $children.show("slow");
            
        } else {
            $self.attr('collapsed', true);
            $children.slideUp();
        }
        
        return false;
    });
});

// IGNORE THE CODE BELLOW!! (it's just binding a button to add new .node elements to the tree) 
$(document).ready(function () {
    $('<button>', { 
        type: 'button',
        text: 'Add new .node',
        id: '#addNodes' 
    })
    .prependTo('body')
    .click(function () {
        $('<div class="node" collapsed="true">' +
              '<div class="node-content">' +
                '<div class="department"> Branch </div>' +
                '<div class="fullname"> Full name</div>' +
                '<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>' +
                '<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>' +
              '</div>' +
              '<div class="node-children">' +
                '<div class="node" collapsed="true">' +
                  '<div class="node-content">' +
                    '<div class="department"> Sub-branch </div>' +
                    '<div class="fullname"> Full name</div>' +
                    '<div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>' +
                    '<div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>' +
                  '</div>' +
                  '<div class="node-children">' +
                  '</div>' +
                '</div>' +
              '</div>' +
            '</div>' + 
          '</div>').appendTo('.wrapper');
          
        $('.node[collapsed] .node').hide();
    });
});
.wrapper {
    background-color: lightblue;
    width: 300px;
    padding: 5px;
    margin: auto;
    display: table;
    font-size: 8px;
    margin-top: 50px;
    border: 1px solid #000000;
    border-radius: 6px;
}
.node {
    width: 100% !important;
    padding-top: 2px;
    position: relative; 
}

.node-content {
    color: gainsboro;
    background-color: #666666;
    border: 2px solid #000000;
    border-radius: 4px;
    width: 100%;
    padding: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.node-children {
    padding: 0 0 0 2px;
}

.postitle {
    color: gainsboro;
    width: 55%;
    display: inline-block;
    margin: 1px;
}
.department {
    color: gainsboro;
    display: inline-block;
    width: 55%;
    margin: 1px;
}
.fullname {
    color: gainsboro;
    width: 113px;
    display: inline-block;
    margin: 1px;
    float: right;
}
.category {
    color: gainsboro;
    width: 113px;
    display: inline-block;
    margin: 1px;
    float: right;
}
.search {
    color: black;
    background-color: silver;
    width: 100px;
    margin: 1px;
    margin-left: 10%;
    position: relative;
    border-radius: 5px;
    padding: 2px;
    border: 0.5px solid #000000;
    display: inline-block;
}
<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <body>
      <!-- Start your code here -->
      <div class="wrapper">
         <div class="search"> Search people... </div>
         <div class="search"> Search skill... </div>
         <div class="node" collapsed="true">
            <div class="node-content">
               <div class="department"> Department </div>
               <div class="fullname"> Full name</div>
               <div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
               <div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
            </div>
            <div class="node-children">
               <div class="node" collapsed="true">
                  <div class="node-content">
                     <div class="department"> Sub-Department </div>
                     <div class="fullname"> Full name</div>
                     <div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
                     <div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
                  </div>
               </div>
               <div class="node" collapsed="true">
                  <div class="node-content">
                     <div class="department"> Sub-Department </div>
                     <div class="fullname"> Full name</div>
                     <div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
                     <div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
                  </div>
                  <div class="node-children">
                     <div class="node" collapsed="true">
                        <div class="node-content">
                           <div class="department"> Branch </div>
                           <div class="fullname"> Full name</div>
                           <div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
                           <div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
                        </div>
                        <div class="node-children">
                           <div class="node" collapsed="true">
                              <div class="node-content">
                                 <div class="department"> Sub-branch </div>
                                 <div class="fullname"> Full name</div>
                                 <div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
                                 <div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
                              </div>
                              <div class="node-children">
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="node" collapsed="true">
            <div class="node-content">
               <div class="department"> Department </div>
               <div class="fullname"> Full name</div>
               <div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
               <div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
            </div>
            <div class="node-children">
               <div class="node" collapsed="true">
                  <div class="node-content">
                     <span>Level 2</span>
                  </div>
                  <div class="node-children">
                     <div class="node" collapsed="true">
                        <div class="node-content">
                           <span>Level 3</span>
                        </div>
                        <div class="node-children">
                           <div class="node" collapsed="true">
                              <div class="node-content">
                                 <span>Level 4</span>
                              </div>
                              <div class="node-children">
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="node" collapsed="true">
            <div class="node-content">
               <div class="department"> Department </div>
               <div class="fullname"> Full name</div>
               <div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
               <div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
            </div>
            <div class="node-children">
               <div class="node" collapsed="true">
                  <div class="node-content">
                     <span>Level 2</span>
                  </div>
                  <div class="node-children">
                     <div class="node" collapsed="true">
                        <div class="node-content">
                           <span>Level 3</span>
                        </div>
                        <div class="node-children">
                           <div class="node" collapsed="true">
                              <div class="node-content">
                                 <span>Level 4</span>
                              </div>
                              <div class="node-children">
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="node" collapsed="true">
            <div class="node-content">
               <div class="department"> Department </div>
               <div class="fullname"> Full name</div>
               <div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
               <div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
            </div>
            <div class="node-children">
               <div class="node" collapsed="true">
                  <div class="node-content">
                     <span>Level 2</span>
                  </div>
                  <div class="node-children">
                     <div class="node" collapsed="true">
                        <div class="node-content">
                           <span>Level 3</span>
                        </div>
                        <div class="node-children">
                           <div class="node" collapsed="true">
                              <div class="node-content">
                                 <span>Level 4</span>
                              </div>
                              <div class="node-children">
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="node" collapsed="true">
            <div class="node-content">
               <div class="department"> Department </div>
               <div class="fullname"> Full name</div>
               <div class="postitle"> <span>Position</span> | <span>Subordinates ()</span>  </div>
               <div class="category"> <span>Location  </span> | <span>Type  </span> | <span>  Mobile </span> </div>
            </div>
            <div class="node-children">
               <div class="node" collapsed="true">
                  <div class="node-content">
                     <span>Level 2</span>
                  </div>
                  <div class="node-children">
                     <div class="node" collapsed="true">
                        <div class="node-content">
                           <span>Level 3</span>
                        </div>
                        <div class="node-children">
                           <div class="node" collapsed="true">
                              <div class="node-content">
                                 <span>Level 4</span>
                              </div>
                              <div class="node-children">
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

关于javascript - 使用 jscript 级联(从上到下)div 的组织结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45798958/

上一篇：html - 动态颜色 css 或内联样式 asp.net mvc razor

下一篇：javascript - 当我在图标 Bootstrap 中单击时展开网格系统列

相关文章：

javascript - 单击用户图像时显示wordpress用户描述

jquery - 随着窗口大小的变化自动重新调整 jquery ui-dialog 的位置

html - 斜杠的样式

javascript - 为当前脚本添加过渡效果

javascript - Forge 查看器事件文档

Javascript正在改变只需要引用的变量

javascript - jQuery JTable 如何拖动行

html - 在 HERE map 上设置 block

javascript - 居中img，绝对定位在div内， overflow hidden

CSS Circle Transition，雪佛龙在中间

©2024 IT工具网  联系我们