jQuery Bootstrap 3 折叠显示状态与雪佛龙图标

Question

提问by Ryan Scott

Using the core example taken from the Bootstrap 3 Javascript examples page for Collapse, I have been able to show the state of collapse using chevron icons.

使用从 Bootstrap 3 Javascript示例页面为 Collapse获取的核心示例，我已经能够使用 V 形图标显示折叠状态。

I have this working using:

我有这个工作使用：

$('#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");
});

This works (not fully tested in all browsers), but I'm wondering if there's a more elegant solution to this?

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

Ideally I'd like to use the core function, but I'm not sure how to achieve the same results with it.

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

$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})

Here's a working version in jsfiddle.

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

Answer 1

回答by biggates

For the following HTML (from Bootstrap 3 examples):

对于以下 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 */
}

<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>

Visual effect:

视觉效果：

bootstrap3 chevron icon on accordion

手风琴上的 bootstrap3 V 形图标

Answer 2

回答by zessx

You could use this kind of code :

你可以使用这种代码：

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);

=> Working JsFiddle

=> 工作JsFiddle

Answer 3

回答by Dmidify

To improve upon the answer with the most upticks, some of you may have noticed on the initial load of the page that the chevrons all point in the same direction. This is corrected by adding the class "collapsed" to elements that you want to load 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>

Here is a working fiddle: http://jsfiddle.net/3gYa3/585/

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

Answer 4

回答by castle

Improvement on Bludream's answer:

Bludream 答案的改进：

You can definitely use FontAwesome!

你绝对可以使用 FontAwesome！

Make sure to include "collapsed" along with "panel-heading" class. The "collapsed" class is not included until you click on the panel so you want to include the "collapsed" class in order to display the correct chevron (i.e., chevron-right is displayed when collapsed and chevron-down when open).

确保包含“collapsed”和“panel-heading”类。“collapsed”类在您单击面板之前不会包含在内，因此您希望包含“collapsed”类以显示正确的 V 形（即，折叠时显示 chevron-right，打开时显示 chevron-down）。

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>

CSS

.panel-heading .chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .chevron:after {
    content: "\f054";   
}

Also, it is a good practice to create a new class instead of using an existing class.

此外，创建一个新类而不是使用现有类也是一种很好的做法。

See Codepen for example: http://codepen.io/anon/pen/PPxOJX

参见 Codepen 例如：http://codepen.io/anon/pen/PPxOJX

Answer 5

回答by Jeff_Alieffson

Thanks to biggates and steakpi. As answer of question Dreamonic, I made a little changes to make all headers clickable (not only title string and gluphs) and took off underline from link. To force an icons appear on same line I added h4 at the end of CSS instructions. Here is the modified code:

感谢 biggates 和牛排。作为 Dreamonic 问题的答案，我做了一些更改，使所有标题都可点击（不仅是标题字符串和 gluphs），并从链接中去掉了下划线。为了强制图标出现在同一行，我在 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>

And the modified CSS:

以及修改后的 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;
}

Answer 6

回答by Jens

Here's a couple of pure css helper classes which lets you handle any kind of toggle content right in your html.

这里有几个纯 css 助手类，它们可以让您在 html 中处理任何类型的切换内容。

It works with any element you need to switch. Whatever your layout is you just put it inside a couple of elements with the .if-collapsed and .if-not-collapsed classes within the toggle element.

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

The only catch is that you have to make sure you put the desired initial state of the toggle. If it's initially closed, then put a collapsedclass on the toggle.

唯一的问题是您必须确保设置所需的切换初始状态。如果它最初是关闭的，则在开关上放置一个折叠的类。

It also requires the :notselector, it doesn't work on IE8.

它还需要:not选择器，它不适用于 IE8。

HTML example:

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>

Less version:

少版本：

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

CSS version:

CSS 版本：

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

Answer 7

回答by Robert Lindabury

I know this is old but since it's now 2018, I thought I would reply making it better by simplifying the code and enhancing the user experience by making the chevron rotate based on collapsed or not. I'm using FontAwesome however. Here's the CSS:

我知道这已经过时了，但由于现在是 2018 年，我想我会通过简化代码并通过使 V 形根据折叠与否旋转来增强用户体验来回复使其更好。但是，我正在使用 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);
}

Here's the HTML for the panel section:

这是面板部分的 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>

I use bootstraps pull-right to pull the chevron all the way to the right of the panel heading which should be full width and responsive. The CSS does all of the animation work and rotates the chevron based on if the panel is collapsed or not. Simple.

我使用 bootstraps pull-right 将 V 形一直拉到面板标题的右侧，面板标题应该是全宽和响应式的。CSS 完成所有动画工作，并根据面板是否折叠来旋转 V 形。简单的。

Answer 8

回答by jai

working simple example

工作简单的例子

get the body condition shown/hidden
get to its parent att
get find icon
change icon

显示/隐藏身体状况
获取其父属性
获取查找图标
更改图标

enter simple

输入简单

HTML:

<body>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
        </div>
        <div id="jai" class="accordion-body collapse in">
            <div>
                <div class="accordion-inner">body content 1</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 2</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
        </div>
        <div id="collapse3" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 3</div>
            </div>
        </div>
    </div>
</body>

JavaScript

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-chevron-down")
           .removeClass("icon-chevron-down").addClass("icon-chevron-up");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-chevron-up")
           .removeClass("icon-chevron-up").addClass("icon-chevron-down");
});

Answer 9

回答by kangcireng

or... you can just put some style like this.

或者...你可以像这样放置一些样式。

.panel-title a.collapsed {
     background: url(../img/arrow_right.png) center right no-repeat;
}
.panel-title a {
     background: url(../img/arrow_down.png) center right no-repeat;
}

http://codepen.io/anon/pen/GJjrQN

Answer 10

回答by azerafati

I'm using font awesome! and wanted a panel to be collapsible

我正在使用字体真棒！并希望面板可折叠

        <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>

                <div class="collapse in" id="collapseOrderItems">
                            ....
                </div>
        </div>

and the css

和 CSS

.panel-heading .fa-chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .fa-chevron:after {
    content: "\f054";   
}

enter image description here

在此处输入图片说明

enter image description here

在此处输入图片说明

jQuery Bootstrap 3 折叠显示状态与雪佛龙图标

提问by Ryan Scott

回答by biggates

回答by zessx

回答by Dmidify

回答by castle

回答by Jeff_Alieffson

回答by Jens

回答by Robert Lindabury

回答by jai

回答by kangcireng

回答by azerafati

相关推荐

最近更新

标签

jQuery Bootstrap 3 折叠显示状态与雪佛龙图标

提问by Ryan Scott

回答by biggates

回答by zessx

回答by Dmidify

回答by castle

回答by Jeff_Alieffson

回答by Jens

回答by Robert Lindabury

回答by jai

回答by kangcireng

回答by azerafati

相关推荐

jQuery JavaScript 代码未在浏览器中执行

jQuery 更改焦点表单元素 ipad web 应用程序时禁用滚动

将“$”（美元符号）替换为“JQuery”

使用 Bootstrap (jQuery) 进行表单验证

相关推荐

最近更新

标签