0

我正在向我的页面添加折叠功能，到目前为止一切正常。

我使用我的标题文本（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 Berg Larsen

编辑：

这是折叠的 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 是打开或关闭的，则显示一个加号或减号。

4

3 回答 3

1

我为你做了一个非常简单的图像交换，使用切换，添加开放类..基本上只是交换背景图像：

http://jsfiddle.net/934bA/

*请忽略临时背景网址和大小

让我知道是否还有其他事情。

我希望这能给你基本的理解，而且它非常简单......它基本上只是一个类的添加和一个类的删除=切换。

分解 ：

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-17T13:26:50.927 回答
1 
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-17T13:12:43.983 回答
0

尝试背景位置：0 0；?

于 2012-07-17T13:14:11.840 回答