0

現在問題があります。ウェブサイトである種のアコーディオンを作成しました。スライドはすべて正常に機能しますが、アイコンの画像 src を変更する関数を作成しようとすると機能しません。

ID の swap1 から swap3 を持つ 3 つの span6 があります。swap1 は最初に表示され、swap 2 と 3 は非表示になっています。

これは私のマークアップです。ここでは swap1 のみを対象としています。swap2 と swap3 は同じように構築されます。

<div id="swap1" class="span6">
     <h3>Lorem Ipsum dolor sit amet?
        <span class="expand"><img src="images/minus.png" /></span>
     </h3>
     <p>Lorem Ipsum dolor sit amet.....</p>
</div>

これはjQueryです：

$(document).ready(function() {
    console.log('logging');
    $('#swap2.span6 p').hide();
    $('#swap3.span6 p').hide();
    $(function() {
        $('#swap1 .expand').click( function() {
             $('#swap1.span6 p').slideToggle();
             $( "#swap1 .expand" ).attr('src', 'images/plus.png').load(function();
        });
        $('#swap2 .expand').click( function() {
             $('#swap2.span6 p').slideToggle();
             $( "#swap1 .expand" ).attr('src', 'images/minus.png').load(function();
        });
        $('#swap3 .expand').click( function() {
             $('#swap3.span6 p').slideToggle();
             $( "#swap1 .expand" ).attr('src', 'images/minus.png').load(function();
        });
     });
 });

まず、スライドは機能しますが、画像 src はまったく変化しません。第二に、あなたがスライドした後に何が起こるかについて私は立ち往生しています。画像は変更された状態のままで、状態 (展開/折りたたみ) に関係なく元に戻りません。私は現在立ち往生しており、他のアコーディオンがどのように機能するかを調べようとしましたが、実際には何も役に立ちませんでした。

http://jsfiddle.net/K2GpC/2/

4

3 に答える 3

1

$( "#swap1 .expand" )属性は<span>ありません。src

セレクターは次のようになります。

$( "#swap1 .expand img" ).attr('src', 'images/plus.png')

于 2013-08-08T08:48:05.757 に答える
1

jQuery UI アコーディオンを使用したくない場合は、jQuery を次のように変更することをお勧めします。これにより、所有している 3 つだけでなく、任意の数の div が許可されます。

$(function() {
    var divs = $('.span6'),
        content = divs.children('p');

    content.hide();
    content.eq(0).show();

    divs.click(function() {
        var thisContent = $(this).children('p');
        content.not(thisContent).slideUp(500, function() {
            $(this).parent().find('h3 .expand img').attr('src', 'images/plus.png');
        });
        thisContent.slideDown(500, function() {
            $(this).parent().find('h3 .expand img').attr('src', 'images/minus.png');
        });
    });
});

のクラスを持つ他のdivがある場合span6は、アコーディオンdivに別のクラス名を付けてから、代わりにそのセレクターを使用する必要があります

例

于 2013-08-08T09:05:46.117 に答える
1

見てみな。それはあなたが望むものでなければなりません。

$('#swap2.span6 p').hide();
$('#swap3.span6 p').hide();
$('.expand').click(function(){
    var expand = $(this);
    var p = expand.parent().next('p');
    var img = expand.find('img');
    p.slideToggle('normal', function() {
        if (p.is(':hidden')) {
            img.attr('src', 'images/plus.png');
        } else {
            img.attr('src', 'images/minus.png');
        }
    });
});
于 2013-08-08T08:53:23.387 に答える