HTML/CSS - Image in div

我正在爲我的頁面添加一個摺疊函數，到目前爲止它都可以正常工作。HTML/CSS - Image in div

我用我的頭文本（H2）來切換功能這樣的：

<a href="javascript:animatedcollapse.toggle('collapse_002')"><h2>Header 1</h2></a>

現在，我想圖像添加到這個開始。摺疊時，它是一個加號圖像。打開時，它會變成一個負號圖像。

我該怎麼做？我想我已經找到了CSS部分和函數（代碼如下），但不知道如何讓圖像顯示。

.toggleButton{ 
display:inline; 
background-image:url(Special_images/pluss3.gif); 
background-size:auto; 
background-repeat:no-repeat; 
} 

.toggleButton.open{ 
display:inline; 
background-image:url(Special_images/minus.gif); 
background-size:auto; 
background-repeat:no-repeat; 
}

<!-- SCRIPT FOR TOGGLE BUTTONS --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$('.toggleButton').click(function(){ 
    $(this).toggleClass("open"); 
}); 
}); 

</script> 
<!-- END -->

什麼，我現在正在努力，這並不工作：

<a href="javascript:animatedcollapse.toggle('collapse_001')"><div class="toggleButton"><h2>Header 1</h2></div></a>

感謝很多提前，了Stian伯格拉森

編輯：

這是倒塌的div之一：

<a href="javascript:animatedcollapse.toggle('collapse_002')"><h2>The Operator in Focus</h2></a> 
<div id="collapse_002"> 
<p>content goes here.. Bla bla bla bla....</p> 
</div>

所以這個作品，因爲它應該。當你點擊標題時，div滑出，顯示div「collapse_002」中的文本。

現在我想要的是在標題前顯示圖像，如果div打開或關閉，則顯示加號或減號。

來源

2012-07-17 Stian Berg Larsen

**注意：**'h2'不允許放入'a'，直到'a'有'display：inline'和'h2'''display：block' style – haynar 2012-07-17 13:03:20

您能否提供所有你正在使用的HTML？ – 2012-07-17 13:03:53

要解決這個問題，只需使用'onclick'屬性來觸發您的事件，而不是使用''標記。 – 2012-07-17 13:05:16

我做了你一個很簡單的圖像交換，使用切換，將開class..basically只是swopping背景圖片：

http://jsfiddle.net/934bA/

* 請忽略溫度的背景URL和尺寸

讓我知道是否還有別的東西。

我希望這給你的基礎知識，它非常簡單......它基本上只是一個添加和類，並刪除類=切換。

細分：

的Html

<div class="toggleButton"><h2>Header 1</h2></div>

腳本

$(function() { 
    $('.toggleButton').click(function() { 
     $(this).toggleClass("open"); 
    }); 
});

CSS

.toggleButton{ 
    display:inline; 
    background-image:url(http://upload.wikimedia.org/wikipedia/en/3/35/Plus_sign.jpg); 
    background-size:20%; 
    background-repeat:no-repeat; 
    background-position:left; 
    padding:20px; 
} 

.open{ 
    background-image:url(http://userserve-ak.last.fm/serve/252/3850515.jpg); 
} 

h2 {margin:0px; padding:0px;display:inline;}

來源

2012-07-17 13:26:50

p { 
margin:0; 
padding-left:16px; 
float:left; 
background-image:url(images/add.png); 
background-repeat:no-repeat;  
    } 

p.down { 
float:left; 
padding-left:16px; 
background-image:url(images/delete.png); 
background-repeat:no-repeat; 
    } 
.button   
{ 
vertical-align:middle; 
} 
.question div 
{ 
border:1px solid #CC0000; 
background-color:#efefef; 
width:580px; 
margin-top:5px; 
font-size:12px; 
padding:5px; 
clear:left; 
} 
.question div a 
{ 
padding-left:20px; 
background: transparent url(images/world_go.png) no-repeat center left; 
text-decoration:none; 
}/

$(document).ready(function() { 
    $('div.question') 
    .children('div').hide().end() 
    .children('p').click(function(){ 
     $(this).toggleClass('down').next().slideToggle("slow"); 
    }); 
}); 

<div class="question"> 

<p class="button">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. &nbsp;</p> 

<div> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. 

<ul> 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li> 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li> 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li> 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li> 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li> 
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li> 
<li> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis vitae dui faucibus pretium. Proin gravida, nisi vitae facilisis egestas, arcu mi adipiscing magna. </li> 
</ul> 

</div> 
</div>

這是一個在段落前面加上減號的切換，下面的段落摺疊切換。

來源

2012-07-17 13:12:43 tahdhaze09

這麼多好回答在這裏。我無法接受多於一個= /但在此感謝您的幫助！在做這種事情時我會記住這一切=）謝謝！ – 2012-07-17 13:41:01

已嘗試background-position：0 0; ？

來源

2012-07-17 13:14:11

我確實將它設置爲左側，並且它工作了（從內聯切換到塊時）。謝了哥們！ – 2012-07-17 13:42:10

HTML/CSS - Image in div

回答

相關問題