Question

我不是开发人员，这是我的第一篇帖子，他要求帮助指导我应该首先考虑哪些技术，所以请求温柔。至少我想了解这种方法是否符合目标。

在最终视图中，我希望从数据库中创建一个组织结构。每个员工至少有一名直接经理组成一棵树，并且他的卡上还附有其他数据。

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

＆＃13;

  $(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")();
  });
    });

＆＃13;

.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;
     }

＆＃13;

<!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>

＆＃13;

Answer 1

这适合你吗？

基本上我已经改变了一点树结构以便递归，在这个过程中减少了CSS和JS。我们现在拥有.level1类

，而不是.level2，.leveln，.node类。

.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>

Answer 2

这个保留了原始结构，并且在单击时不允许节点自我折叠。

$.fn.nextAfter = function (selector) {
    var i,
        len,
        $next = $(),
        $elements = this.nextAll();
    
    for (i = 0, len = $elements.length; i < len; i++) {
        if ($elements.eq(i).filter(selector).length > 0) {
            $next = $next.add($elements.eq(i));
      
        } else {
            break;
        }
    }
    
    return $next;
};

$(document).ready(function() {
    $(".level1_div").click(function() {
        if ($(this).attr('collapsed') === 'true') {
            $(".level1_div").attr('collapsed', true);
            $(".level2_div").attr('collapsed', true).slideUp();
            $(".level3_div").attr('collapsed', true).slideUp();
            $(".level4_div").slideUp();
            
            $(this).nextAfter('.level2_div').show("slow");
            $(this).attr('collapsed', false);
        }
    });

    $(".level2_div").click(function() {
        if ($(this).attr('collapsed') === 'true') {
            $(".level2_div").attr('collapsed', true);
            $(".level3_div").attr('collapsed', true).slideUp();
            $(".level4_div").slideUp();
            
            $(this).nextAfter('.level3_div').show("slow");
            $(this).attr('collapsed', false);
        }
    });

    $(".level3_div").click(function() {
        if ($(this).attr('collapsed') === 'true') { 
            $(".level3_div").attr('collapsed', true);
            $(".level4_div").slideUp();
            
            $(this).nextAfter('.level4_div').show("slow");
            $(this).attr('collapsed', false);
        }
    });
});

.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" collapsed="true">
            <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" collapsed="true">
            <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" collapsed="true">
            <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" collapsed="true">
            <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" collapsed="true">
            <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" collapsed="true">
            <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" collapsed="true">Level 2</div>
         <div class="level3_div" collapsed="true">Level 3</div>
         <div class="level4_div" collapsed="true">Level 4</div>
         <div class="level1_div" collapsed="true">
            <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" collapsed="true">Level 2</div>
         <div class="level3_div" collapsed="true">Level 3</div>
         <div class="level4_div" collapsed="true">Level 4</div>
         <div class="level1_div" collapsed="true">
            <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" collapsed="true">Level 2</div>
         <div class="level3_div" collapsed="true">Level 3</div>
         <div class="level4_div" collapsed="true">Level 4</div>
         <div class="level1_div" collapsed="true">
            <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" collapsed="true">Level 2</div>
         <div class="level3_div" collapsed="true">Level 3</div>
         <div class="level4_div" collapsed="true">Level 4</div>
      </div>
      <!-- End yo</p>code here -->
   </body>
</html>

组织结构级联（从上到下）div与jscript

2 个答案: