0

我目前有一个问题。我在网站上制作了某种手风琴。滑动一切正常，但是，当我尝试编写一个函数来更改图标的图像 src 时，它不起作用。

我有 3 个 span6，ID 的 swap1 到 swap3。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

看看这个。它应该是你想要的。

$('#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 回答
1

如果您不想使用jQuery UI 手风琴，我建议您将 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');
        });
    });
});

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

例子

于 2013-08-08T09:05:46.117 回答