Question

我目前遇到了问题。我在网站上建了一些手风琴。滑动工作正常，但是，当我尝试编写一个函数来更改图标的图像时，它不起作用。

我有3个span6，ID为swap1到swap3。 swap1在开始时可见，交换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/

Answer 1

$( "#swap1 .expand" )是<span>他们没有src属性。

你的选择器应该是：

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

Answer 2

检查出来。它应该是你想要的。

$('#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');
        }
    });
});

Answer 3

如果您不想使用jQuery UI accordion，我建议您将jQuery更改为以下内容，因为它允许任意数量的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');
        });
    });
});

如果你有其他具有span6类的div，那么你需要给你的手风琴div另一个类名，然后使用那个选择器

Example

一旦内容区域滑动发生，更改跨度的图像源

3 个答案: