通過連接器連接自舉面板

Question

我有一堆 Bootstrap 面板，其中一些是相互關聯的。 就像是

Panel A -> Panel B -> Panel C

當用戶單擊面板 B 時，將顯示面板 C，單擊面板 C 時，將顯示面板 D。 我面臨的問題是我需要使用一些連接器（水平線/箭頭或一些圖像）將父面板鏈接到子面板，但我不知道該怎么做。

我希望第一列中第一個標題的箭頭或連接器連接到第二列，從第二列到第三列，依此類推

我的面板的結構在小提琴鏈接中給出。

任何指針將不勝感激。

https://jsfiddle.net/vatsalpande/af51yf0s/[![在此處輸入圖片描述] 1 ] 1

   <div class="container-fluid">

        <div class = "row">
        
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2"><h5>First Title</h5> </div>
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2  "><h5>Second</h5></div>
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2  "><h5>Third</h5></div>
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2  "><h5>Fourth</h5></div>
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2  "><h5>Fifth</h5></div>
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2  "></div>
        </div>
        
        <div class = "row">
        
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">
                
                <div class="panel-group">
                   
                    <div class="panel panel-default" id = " ">
                        <div class="panel-heading">First Title</div>
                        <div class="panel-body">
                            <p> A : 5.8</p>
                            <p> B : 209M</p>
                        </div>
                    </div>

                    <div class="panel panel-default" id = " ">
                        <div class="panel-heading">B</div>
                        <div class="panel-body">
                            <p> A : 5.8</p>
                            <p> B : 209M</p>
                            <p> C : 209M</p>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2  ">
                     <div class="panel-group">
                        <div class="panel panel-default" >
                            <div class="panel-heading">C</div>
                            <div class="panel-body">
                                <p> A : 5.8</p>
                                <p> B : 209M</p>
                            </div>
                        </div>
                    
                    
                    
                        <div class="panel panel-default" >
                            <div class="panel-heading">P</div>
                            <div class="panel-body">
                                <p> A : 5.8</p>
                                <p> B : 209M</p>
                                <p> B : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" >
                            <div class="panel-heading">F</div>
                            <div class="panel-body">
                                <p> A : 5.8</p>
                                <p> B : 209M</p>
                                <p> C : 209M</p>
                            </div>
                        </div>
                    </div>
            </div>
            
            
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2  ">    
                    <div class="panel-group">
                        <div class="panel panel-default" id = "siteTraffic">
                            <div class="panel-heading">P </div>
                            <div class="panel-body">
                                <p> A : 5.8</p>
                                <p> B : 209M</p>
                            </div>
                        </div>
                    
                    
                    
                        <div class="panel panel-default" id = " ">
                            <div class="panel-heading">a</div>
                            <div class="panel-body">
                                <p> A : 5.8</p>
                                <p> B : 209M</p>
                                <p> C : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" id = " ">
                            <div class="panel-heading">W</div>
                            <div class="panel-body">
                                <p> Q : 5.8</p>
                                <p> V : 209M</p>
                                <p> E : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" id = "totalMarketingTraffic">
                            <div class="panel-heading">W</div>
                            <div class="panel-body">
                                <p> Q : 5.8</p>
                                <p> V : 209M</p>
                                <p> Q : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" id = " ">
                            <div class="panel-heading">e</div>
                            <div class="panel-body">
                                <p> Q : 5.8</p>
                                <p> Q : 209M</p>
                                <p> Q : 209M</p>
                            </div>
                        </div>
                    </div>
            </div>
            
            
            <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2  ">        
                    <div class="panel-group">
                        <div class="panel panel-default" id = " ">
                            <div class="panel-heading">Q</div>
                            <div class="panel-body">
                                <p> Q : 5.8</p>
                                <p> Q : 209M</p>
                            </div>
                        </div>
                    
                    
                    
                        <div class="panel panel-default" id = " ">
                            <div class="panel-heading">w</div>
                            <div class="panel-body">
                                <p> w : 5.8</p>
                                <p> w : 209M</p>
                                <p> w : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" id = " ">
                            <div class="panel-heading">w</div>
                            <div class="panel-body">
                                <p> w : 5.8</p>
                                <p> w : 209M</p>
                                <p> w : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" id = " ">
                            <div class="panel-heading">P2</div>
                            <div class="panel-body">
                                <p> w : 5.8</p>
                                <p> w : 209M</p>
                                <p> w : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" id = " ">
                            <div class="panel-heading">2</div>
                            <div class="panel-body">
                                <p> 2 : 5.8</p>
                                <p> w : 209M</p>
                                <p> 2 : 209M</p>
                            </div>
                        </div>
                        
                        <div class="panel panel-default" id = " ">
                            <div class="panel-heading">w</div>
                            <div class="panel-body">
                                <p> 2 : 5.8</p>
                                <p> w : 209M</p>
                                <p> e : 209M</p>
                            </div>
                        </div>
                    </div>
            </div>
            
            
              <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 emails">      
                   <div class="panel-group">
                        <div class="panel panel-default" id = " ">
                            <div class="panel-heading">eh</div>
                            <div class="panel-body">
                                <p> e : 5.8</p>
                                <p> e : 209M</p>
                            </div>
                        </div>
                    
                    
                    
                        <div class="panel panel-default" id = " ">
                            <div class="panel-heading">w</div>
                            <div class="panel-body">
                                <p> q : 5.8</p>
                                <p> q : 209M</p>
                                <p> q : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" id = " ">
                            <div class="panel-heading">wq</div>
                            <div class="panel-body">
                                <p> q : 5.8</p>
                                <p> q : 209M</p>
                                <p> q : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" id = " ">
                            <div class="panel-heading">2l</div>
                            <div class="panel-body">
                                <p> w : 5.8</p>
                                <p> e : 209M</p>
                                <p> e : 209M</p>
                            </div>
                        </div>
                         
                         <div class="panel panel-default" id = " ">
                            <div class="panel-heading">2rs</div>
                            <div class="panel-body">
                                <p> t : 5.8</p>
                                <p> t : 209M</p>
                                <p> t : 209M</p>
                            </div>
                        </div>
                        
                        <div class="panel panel-default" id = " ">
                            <div class="panel-heading">2</div>
                            <div class="panel-body">
                                <p> t : 5.8</p>
                                <p> t : 209M</p>
                                <p> t : 209M</p>
                            </div>
                        </div>
                    </div>
            </div>
            
            
             <div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 details">          
                
                <div class="panel panel-default">
                    <div class="panel-heading">2cs</div>
                    <div class="panel-body">
                   <div class="col-lg-6 col-sm-6 col-md-6 col-xs-6 emails">
                        <div class="panel-group">
                            <div class="panel panel-default" id = "siteTraffic">
                                <div class="panel-heading">cc/div>
                                <div class="panel-body">
                                    <p> 2 : 5.8</p>
                                    <p> 2 : 209M</p>
                                </div>
                            </div>
                    
                    
                    
                            <div class="panel panel-default" id = " ">
                                <div class="panel-heading">ccc</div>
                                <div class="panel-body">
                                    <p> w : 5.8</p>
                                    <p> w : 209M</p>
                                    <p> w : 209M</p>
                                </div>
                            </div>
                       </div>
                    </div>
                    
                    <div class="col-lg-6 col-sm-6 col-md-6 col-xs-6 emails">
                       
                        <div class="panel-group">
                            <div class="panel panel-default" id = " ">
                                <div class="panel-heading">tt</div>
                                <div class="panel-body">
                                    <p> q : 5.8</p>
                                    <p> w : 209M</p>
                                </div>
                            </div>
                    
                    
                    
                            <div class="panel panel-default" id = " ">
                                <div class="panel-heading">t</div>
                                <div class="panel-body">
                                    <p> e : 5.8</p>
                                    <p> e : 209M</p>
                                    <p> e : 209M</p>
                                </div>
                            </div>
                            
                            <div class="panel panel-default" id = " ">
                                <div class="panel-heading">ff</div>
                                <div class="panel-body">
                                    <p> e : 5.8</p>
                                    <p> e : 209M</p>
                                    <p> e : 209M</p>
                                </div>
                            </div>
                            
                            <div class="panel panel-default" id = " ">
                                <div class="panel-heading">ggg</div>
                                <div class="panel-body">
                                    <p> YoY : 5.8</p>
                                    <p> Count : 209M</p>
                                    <p> Share : 209M</p>
                                </div>
                            </div>
                            
                            <div class="panel panel-default" id = " ">
                                <div class="panel-heading">wq</div>
                                <div class="panel-body">
                                    <p> e : 5.8</p>
                                    <p> q : 209M</p>
                                    <p> q : 209M</p>
                                </div>
                            </div>
                       </div>
                       
                    </div>
                    
                </div>
                
                 </div>
            </div>
        
        
        </div>
    
    
    </div>

Answer 1

在面板組上方添加箭頭字形並應用 CSS 樣式以進行正確定位。

你的 HTML 的一部分：

<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2 emails">    
   <span class="glyphicon glyphicon-arrow-right right-arrow"></span>
   <div class="panel-group">

在你的 CSS 中：

.right-arrow {
   position:absolute;
   margin-left: 115px;
   margin-top: 10px;
}

工作 JS 小提琴：演示在這里