jQuery toggleClass无法与引导程序折叠一起工作(更改图标/类)

7cjasjjr  于 2022-12-03  发布在  jQuery
关注(0)|答案(2)|浏览(138)

我正在使用bootstrap 3和collapse函数。如果我点击我的plus-icon,collapse面板将显示。再点击一次,面板将关闭。工作!
但我想toggleClass我的图标.. onclick更改为imgMinus(打开折叠),再次单击,更改为imgPlus(关闭折叠)。
Here's my fiddle ...
我试着addClassremoveClass..没有任何效果...?
如果我只有一个内容容器,我的代码片段就可以工作,但不能同时使用两个容器!

$('.clickToggle').click(function() {
           /*if ($(this).children('div').hasClass("imgPlus")) {
             $(this).children('div').addClass("imgMinus");
             $(this).children('div').removeClass("imgPlus");
          }*/

          $(this).children('div').toggleClass('imgPlus imgMinus');
});
gfttwv5a

gfttwv5a1#

你已经很接近了!我从你的html中删除了脚本标签,并把它放在了小提琴的JavaScript部分。然后我删除了点击切换的额外脚本。
下面的代码是您需要将+更改为-以及将-更改为+的唯一脚本http://jsfiddle.net/02o08heq/31/

$( document ).ready(function() {
    $('.clickToggle').click(function() {
        $(this).children('div').toggleClass('imgPlus imgMinus');
    });
});

另外,在您的小提琴中,您有addClass,而我相信您的意思是toggleClass(即使您的代码片段有它)

gpnt7bae

gpnt7bae2#

在添加之前:

<script>
    $(document).ready(function() {
        $('.clickToggle').click(function() {
            $(this).find('div').toggleClass("imgMinus");
            $(this).find('div').toggleClass("imgPlus");
        });
    });
</script>

所以才会奏效!

相关问题