Question

我必须在工作中使用Plone4，这对开发施加了很多限制。我们Plone安装的当前Bootstrap版本是2.3.2。根据要求，我创建了一个页面，其中一些文本行可单击以具有手风琴面板。在文本旁边，我有下拉箭头，根据手风琴面板是否打开来改变方向。我唯一不满意的是，当您点击不同的手风琴面板时，打开之前的箭头图像保持不变。有没有办法解决这个问题？我的代码：

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 Selector：

完成

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

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

Answer 2

如果你给你的图像分类，就像这样：

mysqli_real_escape_string()

然后你可以处理点击事件并在每个事件上适当地设置箭头。这是有效的，因为当点击手风琴打开一个面板时，它会假定所有其他箭头都将关闭，因此它会将所有箭头设置为关闭，然后最后打开与当前单击的面板相关的箭头。

另请注意，我已更改了click事件以处理所有折叠面板上的点击次数 - 您现有的样本只处理了最顶层的面板，因为它使用的是ID，而不是类。

<img id="arrow01" class="arrow" src="/arrow-down" alt="Indicates a dropdown for additional information" />

更改图像源onclick手风琴

2 个答案: