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

回答

相关问题