可折叠订单状态表跨度问题

Question

我正在尝试重新创建此订单状态HTML / CSS：    https://www.sitepoint.com/community/t/order-status-table-html-css-help/101907/3

并与作者遇到相同的问题。尚未单击时，表格处于折叠形式，然后展开然后选择订单号。

如果有多个帐号，我该如何只打开选择行，因为在我的情况下，它将打开所有帐号详细信息，而不是所选的详细信息。

jQuery(document).ready(function() {
   jQuery('.closedArrow').click(function() {
    $('.expanded').toggle();
    $('.collapsed').toggle();
    $( "span.closedArrow" ).toggleClass( "openArrow" );
    
});
  });

.closedArrow {
	<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716484-3exx.png') no-repeat 1px 1px; -->	
	padding-left: 20px;
	padding-bottom: 10px;
	padding-top: 4px; 
	cursor:pointer;
}

.openArrow {
	<!-- background: url('http://is200.imagesocket.com/images/2014/10/29/2716483-0cvp.png') no-repeat 1px 1px; -->
	padding-left: 20px;
	cursor:pointer;
}

.steps {
    margin:0 0 20px;
    padding:0;
    list-style:none;
    overflow:hidden;
}

.green {
	background:#7dba00 !important; 
	color: #666666 !important;
}

.grey {
	color: #666666 !important;
}

.open .green:after  {
	border-left-color: #7dba00 !important;
}

.wrap .num.last:after {
	display:none
}
.wrap .num.last:before {
	display:none
}

.black {
	background:#000 !important; 
	color:#fff!important;
}

.open .black:after  {
	border-left-color: #000 !important; 
	color:#fff!important;
}

.steps li {
	float:left;
	position:relative;
}

.wrap {
	float:left;
}

.num {
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    background:#7dba00;
    color:#000;
    font-weight:bold;
    text-align:center;
    float:left;
    position:relative;
    margin:0 4px 0 0;
}

.num b, .steps p span {
	position:relative;
	z-index:2; 
	display:block;
}

.num:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 14px solid #fff;
    border-bottom: 14px solid #fff;
    border-left: 14px solid #7dba00;
    position:absolute;
    right:-4px;
    top:1px;
}

.steps p {
    background: #fff;
	margin: 0;
	float: left;
	height: 30px;
	line-height: 14px;
	font-size: 10px;
	width: 10em;
	padding: 0 10px 0 0px;
	text-align: center;
}


.closed .num:after {
	border-left-color:#000
}

.closed .num {
	color:#fff;
	background:#000
}

.closed .num.last:after {
	display:none
}

.open .num:after {
    border-left-color:#ccc;
    border-top-color:transparent;
    border-bottom-color:transparent;
    z-index:1;
}

.open .num:before {
    width: 0;
    height: 0;
    content:" ";
    position:absolute;
    border-top: 15px solid #fff;
    border-bottom: 15px solid #fff;
    border-left: 15px solid #7dba00;
    position:absolute;
    right:-5px;
    top:0;
    z-index:0;
}

.open .num {
	background:#ccc;
}

.open .wrap {
	border-radius:15px 0 0 15px;
	border:1px solid #7dba00;
}

li.open:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 16px solid #fff;
    border-bottom: 16px solid #fff;
    border-left: 15px solid #7dba00;
    position:absolute;
    right:0;
    top:0;
    z-index:0;
}

li.open:before {
    width: 0;
    height: 0;
    content:" ";
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 14px solid #fff;
    position:absolute;
    right:1px;
    top:1px;
    z-index:1;
}

.expanded {
	display:none;
	<!--bbackground-color: red;-->
	padding-right: 900px;
}

.tab {
	<!--background-color: yellow; -->
	<!--border: 2px solid black; -->
	border-collapse: collapse;
	box-shadow: inset 0 1px 0 #fff;
	font-size: 12px;
	line-height: 15px;
	text-align: left;
	width: 85%;
	margin-left: 230px;
}

.column {
    float: left;
    width: 25%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}
 
  
.completed span {
    background-color:NONE;
    color:#95db89;
    border:2px solid #95db89;
}

.todo span {
    background-color:none;
    color:#E1E6EB;
    border:2px solid #E1E6EB;
}
  
.list span {
	color:#58D68D;
	font-weight:500;
	font-size: 12px;
}
    
.breadcrumb-pagination div p {
    text-align:center;
    line-height:0;
    margin:30px auto 25px;
 }
    
.active p {
   border-bottom:2px solid #00abc9;
   padding-bottom:27px;
   margin-bottom:0px !important;
   color: #3c4043;
   font-weight:700;  
}

    
.completed p {
    color:#bsb7c1;
  }
 
.list p {
    color:#3c4043;
	font-weight:700;
  }

.completed span::before { 
  content: '\2713' 
}

.title{
	text-align:center;
	text-decoration: none;
	margin-left: 365px;
	color: #444;
}

table {
	border-collapse: collapse;
	box-shadow: inset 0 1px 0 #fff;	
	font-size: 15px;
	line-height: 15px;
	text-align: left;
	width: 98%;
}	

th {
	background: linear-gradient(#000000, #4d4d4d);
	border-left: 1px solid #555;
	border-right: 1px solid #777;
	border-top: 1px solid #555;
	border-bottom: 1px solid #333;
	box-shadow: inset 0 1px 0 #999;
	color: #fff;
    font-weight: bold;
	padding: 10px 15px;
	position: relative;
	text-shadow: 0 1px 0 #000;	
}

th:after {
	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
	content: '';
	display: block;
	height: 15%;
	left: 0;
	margin: 1px 0 0 0;
	position: absolute;
	top: 25%;
	width: 100%;
}

th:first-child {
	border-left: 1px solid #777;	
	box-shadow: inset 1px 1px 0 #999;
}

th:last-child {
	box-shadow: inset -1px 1px 0 #999;
}

td {
	border-right: 1px solid #fff;
	border-left: 1px solid #e8e8e8;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #e8e8e8;
	padding: 8px ;
	position: relative;
	transition: all 300ms;
}

td:first-child {
	box-shadow: inset 1px 0 0 #fff;
}	

td:last-child {
	border-right: 1px solid #e8e8e8;
	box-shadow: inset -1px 0 0 #fff;
}	

tr {
	background: url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:nth-child(odd) td {
	background: #f1f1f1 url(https://jackrugile.com/images/misc/noise-diagonal.png);	
}

tr:last-of-type td {
	box-shadow: inset 0 -1px 0 #fff; 
}

tr:last-of-type td:first-child {
	box-shadow: inset 1px -1px 0 #fff;
}	

tr:last-of-type td:last-child {
	box-shadow: inset -1px -1px 0 #fff;
}

h1 {
	color: #444;
	text-shadow: 
    1px 0px 1px #ccc, 0px 1px 1px #eee, 
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
	text-align: center;
}

a:hover,a:focus{
    outline: none;
    text-decoration: none;
}

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<h1> ORDER TRACKING SYSTEM </h1>
<br>
 <table class="multiAccount">
  <tr>
    <th>Account #</th>
    <th>Order #</th>
    <th>Current Status (Ongoing)</th>
   
  </tr>
  <tr>
    <td valign="top"><span class="closedArrow">4579637</span></td>
	<td valign="top"><span class="closedArrow">5822412</span></td>
    <td valign="top" class="collapsed"><ol class="steps">
        <li>
                <div class="num green"><b>1</b></div>
        </li>
        <li>
                <div class="num green"><b>2</b></div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num grey"><b>3</b></div>
                        <p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
                </div>
        </li>
        <li class="closed">
                <div class="num"><b>4</b></div>
        </li>
        <li class="closed">
                <div class="num last"><b>5</b></div>
        </li>
</ol></td> 
<tr>
    <td valign="top"><span class="closedArrow">6784120</span></td>
	<td valign="top"><span class="closedArrow">7893200</span></td>
    <td valign="top" class="collapsed"><ol class="steps">
        <li>
                <div class="num green"><b>1</b></div>
        </li>
        <li>
                <div class="num green"><b>2</b></div>
        </li>
        <li class="closed">
                <div class="num"><b>3</b></div>
        </li>
		<li class="open">
                <div class="wrap">
                        <div class="num grey"><b>4</b></div>
                        <p><span>Service Activation</span><span>Done: 08/25/2014</span></p>
                </div>
        </li>
        <li class="closed">
                <div class="num last"><b>5</b></div>
        </li>
</ol></td> 
   <td colspan="2" class="expanded">
  <ol class="steps">
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>1</b></div>
                        <p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num green"><b>2</b></div>
                        <p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num grey"><b>3</b></div>
                        <p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black"><b>4</b></div>
                        <p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
                </div>
        </li>
        <li class="open">
                <div class="wrap">
                        <div class="num black last"><b>5</b></div>
                        <p><span>Order Provisioning</span><span>Done: 08/25/2014</span></p>
                </div>
        </li>
</ol>
<div class="tableDiv">
  <div class="tab-content tabs">
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                        <table border="2px">
							<tr><th>ITEM</th><th>DETAILS</th></tr>
							<tr><td>Order No.</td><td>5822412</td></tr>
							<tr><td>Account Name:</td><td>Mead O'Brien</td></tr>
							<tr><td>Services:</td><td>UNE POTS/T-1</td></tr>
							<tr><td>Installation Address:</td><td>1217 W Capitol Ave,  Little Rock, AR 72201 </td></tr>
							<tr><td>Project Coordinator:</td><td>John Smith</td></tr>
							<tr><td>Phone:</td><td>501-375-3719</td></tr>
							<tr><td>Email:</td><td>jsmith@company.com</td></tr>
							
						</table>
                    </div>
   </div>
  </div> 
  </tr>
</table>
</table>
</body>
</html>

Answer 1

这样，只有点击的行会受到影响

jQuery(document).ready(function() {
   jQuery('.closedArrow').click(function() {
         $(this).parents('tr').children('.expanded').toggle();
         $(this).parents('tr').children('.collapsed').toggle();
         $(this).toggleClass( "openArrow" );    
    });
});