Bootstrap切換按鈕摺疊Flot餅圖

我試圖添加一個Bootstrap切換按鈕，當它被按下時摺疊圖表。我首先爲數據表添加了相同的按鈕，並且它工作正常，但是當我將其添加到圖表時，第一次單擊圖表所在的面板時會縮小，第二次單擊時隱藏圖表，第三次（當它應該打開它）它會打開，但它會縮小（不在面板中）。Bootstrap切換按鈕摺疊Flot餅圖

<div class="mypanel" id="PanelA"> 
<div class="panel panel-default"> 
    <div class="panel-body"> 
     <div class="demo-container"> 
      <div id="ChartA" class="demo-placeholder"></div> 
     </div> 
      <div class="demo-container" data-bind="visible:dataList().length>0"> 
       <br /> 
       <div class="btn-group" style="padding-right:10px; padding-left:10px"> 
        <button type="button" class="btn btn-default pull-left" data-toggle="collapse" id="BtnCA"> 
         <span class="fa fa-bar-chart" aria-hidden="true"></span> 
         <span class="btnFont">Show Chart</span> 
        </button> 
       </div> 
       <div id="ChartA-Overview" style="width: 100%; min-height:100px" class="demo-placeholder"></div> 
      </div>    
     </div> 
    </div> 
</div>

有什麼辦法，只要按下切換按鈕摺疊/顯示海軍報圖？

來源

2016-11-02 Dana

首先，您錯過了ID中的結尾雙引號。如果您希望div開始摺疊，您還需要將class="collapse"添加到div。

<div id="ChartA-Overview ...

應該<div id="ChartA-Overview" class="collapse" ... >

由於您使用的是<button>，添加data-target屬性來定位要摺疊和展開（即data-target="ChartA-Overview"）div的ID。

編輯2

有時標識的來自數據綁定...它像「」憲章 - 概述「+ ID（），

如果是這樣的情況下，你可以使用jQuery來獲取DIV ID添加data-target屬性。這裏有一個codepen供您查看。

http://codepen.io/yongchuc/pen/QGLdez

來源

2016-11-02 15:50:39

有時，Id的數據綁定......它的「類似」「ChartA-Overview」+ Id（），這就是爲什麼我無法添加數據目標 – Dana

在這種情況下，您將需要使用jQuery來捕獲div的ID然後添加數據目標屬性到所需的按鈕。 –

就是這樣！非常感謝！ :) – Dana

Bootstrap切換按鈕摺疊Flot餅圖

回答

相關問題