通過連接器連接引導面板

我有一堆引導面板，其中一些是相互關聯的。類似於面板A - >面板B - >面板C.通過連接器連接引導面板

當用戶點擊面板B時，面板C將被顯示，當面板C被點擊時面板D將被顯示。我面臨的問題是我需要通過一些連接器（水平線/箭頭或一些圖像）將父面板鏈接到子面板，我不知道如何去做。

我想從第一名稱在第一列中的箭頭或連接器連接到第二列和從第二到第三等我面板結構的

結構在小提琴鏈路中給出。

任何指針將不勝感激。

https://jsfiddle.net/vatsalpande/af51yf0s/

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

來源

2016-03-03 Vatsal

添加上述面板組箭頭glyphicon和應用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小提琴：Demo here

來源

2016-03-03 00:57:44 Naga2Raja

感謝您的幫助。如果我希望這個箭頭是動態的？我需要相應地調整幅度 - 頂部？我該如何照顧它。對於前 - 我希望它只與被點擊的元素一起呈現。如果B被點擊，B應該有一個箭頭或者如果B＆F被點擊，那麼B＆F應該有箭頭？感謝您的幫助 – Vatsal

您可以使用CSS樣式調整箭頭的位置。如果您需要在點擊時動態顯示箭頭，則可以使用Jquery的.show（）/ .hide（）函數。最初隱藏箭頭並單擊顯示箭頭。 – Naga2Raja

檢查小提琴在這裏：https://jsfiddle.net/naga2raja/rmbub9ux/6/。只需點擊第一個標題和箭頭即可。無論你需要什麼，都可以實現相同的功能。 – Naga2Raja

通過連接器連接引導面板

回答

相關問題