那些遇到过的问题

Bootstrap 3使用雪佛龙图标折叠显示状态

Rya*_*ott 124 css jquery twitter-bootstrap twitter-bootstrap-3

使用自举3的Javascript采取的核心例子为折叠的例子页面,我已经能够证明使用V形图标崩溃的状态.

我有这个工作使用:

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
Run Code Online (Sandbox Code Playgroud)

这有效(并未在所有浏览器中进行过全面测试),但我想知道是否有更优雅的解决方案？

理想情况下我想使用核心功能,但我不确定如何用它来实现相同的结果.

$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})
Run Code Online (Sandbox Code Playgroud)

这是jsfiddle中的一个工作版本.

小智 236

对于以下HTML(来自Bootstrap 3示例):

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
Run Code Online (Sandbox Code Playgroud) 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>
Run Code Online (Sandbox Code Playgroud)

视觉效果:

手风琴上的bootstrap3雪佛龙图标

  • 我知道这是一个老帖子,但要回答卡尔的问题 - 如果你用"手风琴 - 切换"在所有锚标签上添加"折叠"类,你的问题就会消失......所以"手风琴 - 切换崩溃了".然后,JQuery将在需要时添加和删除类. (54认同)
  • 我没有看到初始状态的纯CSS解决方案; 这里的问题是,引导程序不会将"折叠"类添加到链接,直到您至少折叠一个(即使它们全部折叠开始).然后它只是从"开放"的链接中删除该类.因此,由于"open"和"default"具有相同的类,所以没有好的纯CSS解决方案.理想情况下,这可以通过修改bootstrap的javascript来添加一个"开放"类来区分.在此之前,请使用它,或者使用其他答案中的JS. (15认同)
  • 这很好用......这里有一个jsFiddle给你:http://jsfiddle.net/panchroma/3gYa3/ (6认同)
  • 在小提琴中,所有的V形符号最初都指向下方.有一个简单的解决方案吗？ (6认同)
  • 我修改了这个例子,以便整个标题是可点击的.我注意到的一个小错误是每个面板最右侧的文本被"推"了一点,直到幻灯片打开/关闭动画完成.如果有人知道如何解决这个问题,请做.这是小提琴:[更新JSFiddle](http://jsfiddle.net/3gYa3/221/) (5认同)

zes*_*ssx 57

你可以使用这种代码:

function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
Run Code Online (Sandbox Code Playgroud)

=>工作JsFiddle

  • 您也可以使用`$('#accordion').on('hidden.bs.collapse shown.bs.collapse',toggleChevron);` (9认同)
  • 如果你喜欢箭头在崩溃开始时而不是在结束时移动你可以使用```$('#accordion').on('hide.bs.collapse show.bs.collapse',toggleChevron); ```而不是 (4认同)
  • 这是一个更好的方式zessx,做得好的伙伴.这是自Bootstrap 3发布以来我见过的第一个干净的解决方案. (2认同)
  • 这非常棒,工作完美,干净的解决方案,谢谢你. (2认同)

Dmi*_*ify 21

为了通过最多的上升来改进答案,你们中的一些人可能已经注意到页面的初始载荷上的V形符号都指向同一方向.通过将"collapsed"类添加到要加载折叠的元素来更正此问题.

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>
Run Code Online (Sandbox Code Playgroud)

这是一个工作小提琴:http://jsfiddle.net/3gYa3/585/

Jef*_*son 9

感谢biggates和steakpi.作为Dreamonic问题的答案,我做了一些改动,使所有标题可点击(不仅是标题字符串和标签),并从链接下划线.为了强制图标出现在同一行,我在CSS指令的末尾添加了h4.这是修改后的代码:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <h4 class="panel-title">Collapsible Group Item #1</h4>
        </a>      
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <h4 class="panel-title">Collapsible Group Item #2</h4>
        </a>      
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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 class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <h4 class="panel-title">Collapsible Group Item #3</h4>
        </a>      
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>
Run Code Online (Sandbox Code Playgroud)

和修改后的CSS:

.panel-heading .accordion-toggle h4:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  
    content: "\e114";    
    float: right;        
    color: grey;        
    overflow: no-display;
}
.panel-heading .accordion-toggle.collapsed h4:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    
}
a.accordion-toggle{
    text-decoration: none;
}
Run Code Online (Sandbox Code Playgroud)

cas*_*tle 9

改进Bludream的答案:

你绝对可以使用FontAwesome!

确保包含"collapsed"和"panel-heading"类.在您单击面板之前不包括"折叠"类,因此您希望包含"折叠"类以显示正确的V形符号(即,折叠时显示V形右侧,打开时显示V形符号).

HTML

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
    <div class="collapse" id="collapseOrderItems1">
        <p>Lorem ipsum...</p>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.panel-heading .chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .chevron:after {
    content: "\f054";   
}
Run Code Online (Sandbox Code Playgroud)

此外,创建新类而不是使用现有类是一个好习惯.

请参阅Codepen,例如:http://codepen.io/anon/pen/PPxOJX

Jen*_*ens 7

这里有几个纯css辅助类,可以让你在html中处理任何类型的切换内容.

它适用于您需要切换的任何元素.无论你的布局是什么,你只需将它放在toggle元素中的.if-collapsed和.if-not-collapsed类的几个元素中.

唯一的问题是你必须确保你把所需的初始状态设置为切换.如果它最初关闭,则在切换上放置一个折叠的类.

它还需要:not selector,它不适用于IE8.

HTML示例:

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

更少版本:

[data-toggle="collapse"] {
    &.collapsed .if-not-collapsed {
         display: none;
    }
    &:not(.collapsed) .if-collapsed {
         display: none;
    }
}
Run Code Online (Sandbox Code Playgroud)

CSS版本:

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}
Run Code Online (Sandbox Code Playgroud)

小智 5

我知道这已经很老了，但是由于现在已经是2018年了，我想我会通过简化代码和通过使人字形根据是否折叠来旋转来增强用户体验来做出更好的答复。我正在使用FontAwesome。这是CSS：

a[data-toggle="collapse"] .rotate {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}
a[data-toggle="collapse"].collapsed .rotate {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}
Run Code Online (Sandbox Code Playgroud)

这是面板部分的HTML：

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <i class="fa fa-chevron-right pull-right rotate"></i>
        </a>
      </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>
Run Code Online (Sandbox Code Playgroud)

我使用引导带向右拉将V形臂一直拉到面板标题的右侧，该宽度应为全宽度且响应迅速。CSS完成所有动画工作，并根据面板是否折叠来旋转人字形。简单。

归档时间：

查看次数：

263785 次

最近记录：

7 年，5 月 前
单击Bootstrap 3折叠更改V形图标 26
更多相关链接
相关归档
Bootstrap 4将导航栏项目对齐到右侧 295
单击链接时不要更改链接颜色 28
在每个对象上设置ClientIDMode = Static是否有任何缺点(在主页的maincontent上设置) 28
通过动画缓慢地从位置A移动到位置B. 27
如何使用Javascript滚动到下一个div？ 27
取消拖动可排序项目 21
是否可以在非响应式网站中加载响应式iframe？ 18
当兄弟姐妹的宽度可变时,如何使元素填充剩余宽度？ 16
Bootstrap datetimepicker中的日期格式 16
如果 Bootstrap-Select 中不存在搜索，则添加新选项 2
难疑归档
'git pull'和'git fetch'有什么区别？ 11447
撤消尚未推送的Git合并 3695
一次捕获多个异常？ 2015
如何按字典值对字典列表进行排序？ 1722
根据pandas中列的值从DataFrame中选择行 1649
C#在foreach中重用变量是否有原因？ 1631
如何在Git中完全替换另一个分支中的master分支？ 1549
在Python中使用大写字母和数字生成随机字符串 1247
如何使用jQuery设置/取消设置cookie？ 1209
测量Python中经过的时间？ 1031