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の1つです：

<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/

*一時的な背景の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-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 に答える