Question

我有自举式可折叠面板，标题中有图标，表示打开/关闭状态。当直接单击这些图标时，这样可以正常工作（即：图标正确更改）。

但是我现在需要以编程方式切换这些面板（通过单击超链接触发），并且在正确打开/关闭面板时，它不会更新标题中的图标。

在下面的代码中，我创建了一个面板，其中包含一个触发其打开/关闭动作的glyphicon。面板下方还是一个超链接，其href属性引用了面板的ID。一个小的jQuery代码片段注意，当单击此超链接时，将调用其目标ID的collapse('toggle')函数。正如您在JSFiddle中看到的那样，通过单击“Test”超链接可以很好地折叠面板，但图标不会更新。

可以看到，单击图标或单击“测试”超链接之间的区别在于，单击该图标将切换包含图标的.collapsed元素的<span>类。单击超链接不会切换此类。

通过谷歌搜索如果在github（https://github.com/twbs/bootstrap/issues/7213）上发现了这个引导问题，它提到了一个老问题，它通过单击标题本身（我的情况下的图标）引起了相同的行为，而这显然是固定的，问题仍然似乎存在于collapse()函数中，可用于以编程方式切换面板，这也是针对此问题（https://github.com/twbs/bootstrap/pull/7424#issuecomment-20107756）执行的拉动操作中提到的，其中@intellix表示这不是工作正常，但它似乎没有被某人接受（或者我可能解释错了，我不是很熟悉github评论/问题/拉动......）。

这仍然是引导程序中的错误吗？或者我是否过多了？

HTML：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
        <span class="collapseicon clickable accordion-toggle  pull-left" data-toggle="collapse" href="#collapseOne"></span>
      <h4 class="panel-title">
          Collapsible Group Item #1
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

</div>

<a href="#collapseOne">Test</a>

使用Javascript：

$('a').on('click', function()
          {
              var HashTag = $(this).attr('href');
             $(HashTag).collapse('toggle'); 
          });

JSFiddle：http://jsfiddle.net/6f6g536r/2/

Answer 1

我认为Bootstrap不会在切换功能中处理这个问题 - 相反，你必须尝试这些方法。

$('a').on('click', function()
{
    var HashTag = $(this).attr('href');
    $(HashTag).collapse('toggle'); 
    $('.collapseicon[href$="' + HashTag + '"]').toggleClass('collapsed'); 
});

Bootstrap可折叠面板，以编程方式切换时未更新标题图标

1 个答案: