Question

我有一个自举式手风琴，我喜欢这个图标在它展开或折叠时改变。

我的JS代码是这样的：

<script>
$('.collapse').on('show', function(){
    $(this).parent().find(".icon myicons-down").removeClass("myicons-down").addClass("myicons-up");
}).on('hide', function(){
    $(this).parent().find(".icon myicons-up").removeClass("myicons-up").addClass("myicons-down");
});
</script>

和HTML一样：

<span class="icon myicons-down"></span><a data-toggle="collapse" data-target="#132" class="accordion-toggle">#132</a>

请注意，我在同一页面上有多个展开/折叠。但无论我做什么，它都不会改变图标......

Answer 1

你忘了点一点。在我的icon-down类名之前

$(this).parent().find(".icon .myicons-down").removeClass("myicons-down").addClass("myicons-up");

Answer 2

这一行：

$(this).parent().find(".icon myicons-down").removeClass("myicons-down").addClass("myicons-up");

会在class内寻找.myicons-down的{{1}} .（它没有.icon所以它现在没有寻找任何东西）但是您的HTML设置似乎应该尝试查找.icon WITH 类.myicons-down。将其更改为：

$(this).parent().find(".icon.myicons-down").removeClass("myicons-down").addClass("myicons-up");

$(this)指的是什么？您的HTML中的.collapse在哪里？

为什么我的bootstrap手风琴图标在扩展/折叠时没有变化？

2 个答案: