javascript - 更改图像源 onclick Accordion

Question

工作中必须使用Plone4，这对开发造成了很多限制。我们的 Plone 安装上当前的 Bootstrap 版本是 2.3.2。根据要求，我创建了一个页面，其中的一些文本行可单击以获得 Accordion 面板。在文本旁边有下拉箭头，该箭头根据 Accordion 面板是否打开而改变方向。我唯一不满意的是，当您单击不同的 Accordion 面板时，之前打开的箭头图像保持不变。有什么办法可以纠正这种行为吗？我的代码:

HTML:

    <div class="accordion-group top">
    <div class="accordion-heading">
    <a id="collapse01" class="accordion-toggle" data-toggle="collapse" data-parent="#timeline-accordion" href="#preferred-name">Indicate "Preferred Name" in HR Self-Service<img id="arrow01" src="/arrow-down" alt="Indicates a dropdown for additional information" />
    </a>        
    <div class="green-bg-gradient color-block col-9 jan16"></div>      
    </div><!-- /heading -->
    <div id="preferred-name" class="accordion-body collapse">
    <div class="accordion-inner">Completed 10/06/16</div>    
    </div><!-- /collapsed -->
    </div><!-- /group -->

jQuery:

    jqbs("a#collapse01" ).click(function() {
    if (jqbs('img#arrow01').attr('src')==='/arrow-up') {
    jqbs('img#arrow01').attr('src', '/arrow-down')
    } else {
    jqbs('img#arrow01').attr('src', '/arrow-up')
    }
    });

感谢您提前提出建议!

Answer 1

不知道你是否可以使用jQuery。可以使用 CSS 选择器来完成:

$('img[src=/arrow-up]').attr('src', '/arrow-down');

将此代码放入点击事件中，将所有向上箭头更改为向下箭头，然后可以将事件焦点从向下更改为向上。