2017-04-03 53 views
1

我可以用圖像代替按鈕來摺疊並顯示文本嗎?摺疊按鈕上的圖像

<button class="btn btn-info" style="background-color: #60bf3b; color: white;" type="button" data-toggle="collapse" data-target="#fatture">Per D.D.T. e Fatture:</button> 
 
<div id="fatture" class="collapse">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
 
</div>

感謝您的幫助!

+0

我不明白你想要什麼,請進一步解釋。 –

+1

如果你想在點擊崩潰效果嘗試這一個https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle –

回答

1

如果您希望按鈕有一個背景,你可以試試這個(fiddle) 只需設置

.btn { 
    background: url("https://i.ytimg.com/vi/FhZrU6g9seg/maxresdefault.jpg") no-repeat transparent; 
    background-size: cover; 
} 

並確保您有這3個包括在內:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

除非你只需要一個圖像作爲一個按鈕,然後你可以做到這一點image fiddle

+0

是的,這就是我需要的,非常感謝你! – mario

+0

沒問題,很高興我能幫你解決問題 –

0
<div class="container"> 
<img data-toggle="collapse" data-target="#demo" src="button.png" width="50px"> 
     <div id="demo" class="collapse"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </div>