HTML - 引導面板上的顯示/隱藏按鈕collapse/expand

我正在使用Bootstrap可摺疊面板。這裏的Fidle它HTML - 引導面板上的顯示/隱藏按鈕collapse/expand

我試圖做到以下幾點：

我想移動無論在面板接頭連接器按鈕（在極端右端），即正好相反文本「面板」
但我只想讓按鈕在擴展面板時可見。當面板被隱藏時，按鈕也應該隱藏起來。

我該如何做到這一點。 JS會是什麼？

我試着做下面的JS：

$(document).ready(function() {   
     $("#btnSearch").hide(); 
     $(".panel-title").click(function() {   
      $("#btnSearch").show();    
     }); 
});

但有了這個當面板是由隱藏按鈕不會隱藏。

來源

2016-12-27 Mr.SK

添加完整的代碼 –

兩個按鈕，在同一水平等級爲「面板」？ – ab29007

你們大多數人幾乎都給出了正確的解決方案來實現我的要求。但是有一個問題：單擊按鈕會導致面板隱藏。這不應該是這樣。有什麼方法可以防止隱藏面板？ –

試試這個。我將你的按鈕移動到面板標題本身並使用position:absolute;定位它們。

這是非常相似，這bootsnipp

$(".panel-success").on('show.bs.collapse', function() { 
 
    $('.buttonCon').addClass('vis'); 
 
}).on('hide.bs.collapse', function() { 
 
    $('.buttonCon').removeClass('vis'); 
 
})

.panel{ 
 
    position:relative; 
 
} 
 
.buttonCon{ 
 
    position:absolute; 
 
    top:5px; 
 
    right:10px; 
 
    display:none; 
 
} 
 
.buttonCon.vis{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="panel panel-success"> 
 
    <div class="buttonCon"> 
 
     <button type="button" class="btn btn-primary" onclick="ReloadData()"> 
 
      Button1 
 
      <span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span> 
 
      </button> 
 
      <button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2"> 
 
      Buttonn2 
 
      <span class="glyphicon glyphicon-remove"></span> 
 
      </button> 
 
     </div> 
 
    <div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;"> 
 
     <div class="panel-title"> 
 
     <span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;Panel 
 
     </div> 
 
    </div> 
 
    <div class="panel-body collapse" id="body"> 
 
     <div class="form-group row"> 
 
     <label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label> 
 
     <div class="col-md-2"> 
 
      <input class="form-control roundedElement" type="text" id="txt1" /> 
 
     </div> 
 

 
     <label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label> 
 
     <div class="col-md-2"> 
 
      <input class="form-control roundedElement" type="text" id="txt2" /> 
 
     </div> 
 

 
     <label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label> 
 
     <div class="col-md-2"> 
 
      <input class="form-control roundedElement" type="text" id="txt3" /> 
 
     </div> 
 
     </div> 
 

 
     <div class="form-group row" style="margin-left:auto;margin-right:auto;"> 
 
     <div class="col-md-2 col-md-offset-5"> 
 
      
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2016-12-27 05:19:41 ab29007

如果雙擊面板，面板摺疊或顯示面板時可能會出現按鈕。這是一種競爭條件，從長遠來看，這個答案可能會帶來更多問題。 – BuddhistBeast

感謝BuddhistBeast爲您提供重要的反饋意見。我更新了我的答案 – ab29007

它運作良好。但是有一個問題：單擊這些按鈕會導致面板隱藏。這不應該是這樣。有什麼方法可以防止隱藏面板？ –

您可以使用引導倒塌事件來實現它。

$('#accordion').on('shown.bs.collapse', function() { 
    $(".buttons").show(); 
}) 
$('#accordion').on('hidden.bs.collapse', function() { 
    $(".buttons").hide(); 
})

檢查此fiddle。

來源

2016-12-27 05:41:18 ilmk

與已經給出的答案相比，以下JsFiddle是另一種選擇。

它主要是防止使用position: absolute，這可能會導致發生不良事情的混雜。下面的jQuery（這是現成的，因爲你使用的引導）將工作：

$("#js-panel").on('show.bs.collapse', function() { 
    $('.js-toggle-btn').removeClass('hide'); 
}).on('hide.bs.collapse', function() { 
    $('.js-toggle-btn').addClass('hide'); 
})

注意到，有事件追蹤面板當前是否打開或關閉（加上2人），可以發現here。

我還建議您花時間閱讀bootstrap網頁上的一些文檔/示例，只是因爲很多css/html非常粗糙/不必要的複雜。

來源

2016-12-27 05:42:32 BuddhistBeast

得到它通過組合@kittyCat（更新解決方案）和@BuddhistBeast提供的答案工作。

這是Fiddle。

HTML代碼：

<div class="container"> 
    <div class="panel panel-success" id="js-panel"> 

    <div class="panelButtons"> 
     <button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;"> 
     Button2 
     <span class="glyphicon glyphicon-remove"></span> 
     </button> 
     <button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()"> 
     Button1 
     <span class="glyphicon glyphicon-search"></span> 
     </button> 
    </div> 

    <div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;"> 
     <div class="panel-title"> 
     <span class="glyphicon glyphicon-expand"></span>&nbsp;&nbsp;Panel 
     </div> 
    </div> 

    <div class="panel-body collapse" id="body"> 
     <div class="form-group row"> 
     <label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label> 
     <div class="col-md-2"> 
      <input class="form-control roundedElement" type="text" id="txt1" /> 
     </div> 

     <label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label> 
     <div class="col-md-2"> 
      <input class="form-control roundedElement" type="text" id="txt2" /> 
     </div> 

     <label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label> 
     <div class="col-md-2"> 
      <input class="form-control roundedElement" type="text" id="txt3" /> 
     </div> 
     </div> 
    </div> 

    </div> 
</div>

JS代碼：

$("#js-panel").on('show.bs.collapse', function() { 
    $('.js-toggle-btn').removeClass('hide'); 
}).on('hide.bs.collapse', function() { 
    $('.js-toggle-btn').addClass('hide'); 
})

來源

2016-12-28 05:27:32

想要接受你的答案，但我只能選擇其中的一個。因此，我已經接受@kittyCat提供的更新解決方案，因爲它解決了按鈕單擊時隱藏面板的問題 –

HTML - 引導面板上的顯示/隱藏按鈕collapse/expand

回答

相關問題