Question

我已经看过几次了，但我似乎无法找到对我有用的东西。我想这个论坛中的一些答案或旧版本的bootstrap。

首先，我应该说我还在学习js而不是很好，但这是我的情况。我有一个手风琴式的崩溃，我试图在小组分别打开或关闭时改变课程。这样，我使用的图标将从打开图标切换为关闭图标。

这是我的标记：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    <span class="accordion-up"></span>title
                </a>
            </h4>
        </div>

        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                content
            </div>
        </div>
    </div>
</div>

这是css：

.accordion-up {
  background: url("images/accordion-up.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  padding: 5px 20px;
}

.accordion-down {
  background: url("images/accordion-down.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  padding: 5px 20px;
}

这是我的js：

$(document).ready(function(){    
  $('#accordion').on('shown', function () {
    $(".accordion-down").removeClass("accordion-down").addClass("accordion-up");
  });

  $('#accordion').on('hidden', function () {
    $(".accordion-up").removeClass("accordion-up").addClass("accordion-down");
  });
});

如果有人可以帮我弄清楚如何进行这些更改切换，我们将不胜感激。

谢谢！

Answer 1

Bootstrap 3的回调语法不正确。

$(document).ready(function(){    
  $('#accordion').on('shown.bs.collapse', function () {
    $(".accordion-down").removeClass("accordion-down").addClass("accordion-up");
  });

  $('#accordion').on('hidden.bs.collapse', function () {
    $(".accordion-up").removeClass("accordion-up").addClass("accordion-down");
  });
});

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

这是一个更简单的版本，它将事件集中在一个函数中并切换类：

$(function() { // shorthand for document.ready
  $('#accordion').on('shown.bs.collapse hidden.bs.collapse', function () {
    $('.accordion-down, .accordion-up').toggleClass('accordion-down accordion-up');
  });
});

在崩溃事件上切换图标

1 个答案: