Question

我知道已多次询问过这个问题，但我无法在代码中找到任何答案。

我正在使用Bootstrap 3面板并折叠显示广告。在基本视图中，只有广告标题与人字形向下字形一起显示，表示有更多信息。

当用户点击V形符号时，会显示包含广告文字的主面板主体。在这一点上，我希望将V形符号字形改为v形符号。

我使用以下代码：

<script language="JavaScript" type="text/javascript">
  $('#Advert').on('show.bs.collapse', function(){
    $('#Glyp-Advert').removeclass('glyphicon glyphicon-chevron-down').addclass('glyphicon glyphicon-chevron-up');
  });
  $('#Advert').on('hide.bs.collapse', function() {
    $('#Glyp-Advert').removeclass('glyphicon glyphicon-chevron-up').addclass('glyphicon glyphicon-chevron-down');
  });
</script>

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a id="Heading-Advert" data-toggle="collapse" data-parent="#accordion" href="#Advert">
        Heading
        <span class="pull-right"><span id="Glyp-Advert" class="glyphicon glyphicon-chevron-down"></span></span>
      </a>
    </h4>
  </div>
  <div id="Advert" class="panel-collapse collapse">
    <div class="panel-body">
      Advert text<br />
    </div>
  </div>
</div>

这会成功显示主广告面板，但不会更改字形。

任何帮助将不胜感激。请注意，该页面将包含多个广告;所以我打算在页面上多次重复上面的代码，但是更改id以包含单词'Advert1'或'Advert2'等而不仅仅是'Advert'。

Answer 1

JavaScript区分大小写。

因此，您对removeclass和addclass的来电无效，因为removeClass和addClass是实际的方法名称（请注意资本＆＃39; C＆＃39 ;在每个名字中）。

您的代码无效。见http://jsfiddle.net/wilsonjonash/SXYZ2/

Answer 2

乔纳森·威尔逊的答案很明显，但是没有提到脚本需要在html之后，而不是在我的示例代码之前。

因此，正确的代码应该是

<div class="panel panel-default"><div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a id="Heading-Advert" data-toggle="collapse" data-parent="#accordion" href="#Advert">
        <span class="pull-right"><span id="Glyp-Advert" class="glyphicon glyphicon-chevron-down"></span></span>
        Heading
      </a>
    </h4>
  </div>
  <div id="Advert" class="panel-collapse collapse">
    <div class="panel-body">
      Advert text<br />
    </div>
  </div>
</div>
<script language="JavaScript" type="text/javascript">
  $('#Advert').on('show.bs.collapse', function(){
    $('#Glyp-Advert').removeClass('glyphicon glyphicon-chevron-down').addClass('glyphicon glyphicon-chevron-up');
  });
  $('#Advert').on('hide.bs.collapse', function() {
    $('#Glyp-Advert').removeClass('glyphicon glyphicon-chevron-up').addClass('glyphicon glyphicon-chevron-down');
  });
</script>

Answer 3

您不一定需要Javascript。您可以使用一些CSS样式执行此操作。这是我如何做到的。

确保您的所有小组标题链接都有此课程：accordion-toggle
将此CSS添加到样式表中：

/* symbol for open panels */
.panel-heading .accordion-toggle:after {
    font-family: 'FontAwesome';
    content: "\f068";
    float: right;
    color: #474747;
}

/* symbol for closed panels */
.panel-heading .accordion-toggle.collapsed:after {
    content: "\f067";
}

注意，我在这里使用过FontAwesome，但您可以将字体和字符更改为您需要的任何内容，例如上下V形符号。

Bootstrap 3折叠 - 根据折叠状态更改面板标题中的glyphicon

3 个答案: