Question

我使用Bootstrap 3框架，并且在折叠元素时需要更改图标。我尝试下面的解决方案，但我不能真正使它工作。拜托，有什么想法吗？

那是我的HTML代码：

<div id="categories-sidebar">
  <a href="#categories" data-toggle="collapse"><i class="nav-arrows pe-7s-angle-down fz32 pe-va"></a>
</div>

<div id="categories" class="collapse">Some text here</div>

我正在尝试使用下面的jQuery代码更改图标吗？

$('#categories').on('shown.bs.collapse', function() {
    $(".nav-arrows").addClass('pe-7s-angle-up').removeClass('pe-7s-angle-down');
  });

$('#categories').on('hidden.bs.collapse', function() {
    $(".nav-arrows").addClass('pe-7s-angle-down').removeClass('pe-7s-angle-up');
  });

Answer 1

我在这里看到的唯一可能导致此问题的原因是您的<i>标签没有被</i>关闭。这可能会引起足够的问题，导致您的图标完全停止工作。

我已经用您的代码很好地举例了

$('#categories').on('show.bs.collapse', function() {
    $(".nav-arrows").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  });

$('#categories').on('hide.bs.collapse', function() {
    $(".nav-arrows").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="categories-sidebar">
  <a href="#categories" data-toggle="collapse"><i class="nav-arrows glyphicon glyphicon-chevron-down fz32 pe-va"></i> text</a>
</div>

<div id="categories" class="collapse">Some text here</div>

我所做的唯一更改是：

使用内置的Glyphicons（因为我无权访问您的图标）
在图标旁边添加单词“文本”，以便我可以单击它更轻松！
使切换发生在hide和show上，因为这是响应更快。

Bootstrap 3，折叠时更改图标

1 个答案: