文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在jQuery或CSS中切换此手风琴的图片？

问如何在jQuery或CSS中切换此手风琴的图片？
EN

Stack Overflow用户

提问于 2014-08-08 13:32:29

回答 1查看 1.2K关注 0票数 0

我有一个包含下拉列表的列表，对于每个下拉标题，我有一个加号图像来表示列表可以在单击时被删除，并且一旦单击加号，就会变成一个负号图像。由于列表中有多个下拉列表，所以当我单击另一个下拉列表时，前一个下拉列表上的减号将返回为加号。这架手风琴是用CSS制作的。如果可以用jQuery或CSS找到解决方案，那就太棒了。(我更喜欢CSS)

HTML：

<div>
    <input id="ac-1" name="accordion-1"  type="radio">
    <label id="change" class="tree" for="ac-1">Dropdown<img class="yellow" src="img/plus.png"></label>
    <article class="ac-small1">
        <hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight3" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
    </article>
</div>
<hr id="listHr"></hr>
<div>
    <input id="ac-2" name="accordion-1" type="radio">
    <label id="change" class="tree" for="ac-2">Dropdown<img class="yellow" src="img/plus.png"></label>
    <article class="ac-small2">
    <hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
        <p><a href="#">Link<img id="chevRight2" src="img/chevron-right.png"></a></p><hr id="listHr"></hr>
    </article>
</div>

jQuery

$(document).ready(function() {
    $("#jumma").click(function () {
        if ($(this).children(".yellow").hasClass('minus') ) {
            $(this).chilren(".yellow").attr('src', 'img/plus.png').removeClass('minus');
        } else {
            $(this).children('.yellow').attr('src', 'img/minus.png').addClass('minus');
        }
    });
});

html

css

image

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-08 13:58:47

首先，您有很多相同的ids。Id应该只使用一次(出于几个原因)。类可以多次使用。

其次，我假设您希望在单击单选按钮时更改<img>。所以当你点击

<input id="ac-1" name="accordion-1"  type="radio">

它会变成减号，当您单击

<input id="ac-2" name="accordion-1" type="radio">

这变成了减号，但一直以来，只有1-是可见的，这是在选定的手风琴。

但是，如果是这样，那么您的JS就会在单选按钮中添加一个类(在本例中，让我们将类称为"ac")，然后使用以下JS：

$(document).ready(function() {
    $(".ac").click(function () {
        $('.yellow.').attr('src', 'img/plus.png').removeClass('minus');
        $(this).find('.yellow').attr('src', 'img/minus.png').addClass('minus');
    });
});

此外，看看引导手风琴，它是非常好的，你可以应用同样的JS，如果你想。

http://getbootstrap.com/javascript/#collapse

希望这能有所帮助

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25204723

复制

相似问题

问如何在jQuery或CSS中切换此手风琴的图片？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery或CSS中切换此手风琴的图片？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jQuery或CSS中切换此手风琴的图片？
EN