Bootstrap 4 在单击下拉菜单时更改插入符号

Posted 2023-03-05

【中文标题】Bootstrap 4 在单击下拉菜单时更改插入符号

【英文标题】：Bootstrap 4 change caret on clicking dropdown

【发布时间】：2018-02-28 02:02:11

【问题描述】：

使用 Bootstrap 4，我正在尝试使用插入符号创建一个下拉列表（例如：指向右侧）。单击下拉菜单时，插入符号指向的方向应更改（例如：向下）。

我有一个way to do that

/*Please refer the above link for full code details*/

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
</a>

<div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        This content is hidden
      </div>
</div>

.css

.panel-heading .accordion-toggle:after 
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;

.panel-heading .accordion-toggle.collapsed:after 
    content: "\e080";

但问题是，最初所有的插入符号都指向下方，应该是正确的

还有其他approaches。但我不想使用 JQuery，因为我的应用程序是 Angular 4。希望尽可能避免使用 JQuery/JS。

这不是duplicate 的问题。

提前非常感谢...

【问题讨论】：

最初创建手风琴时，默认情况下将collapsed 类添加到具有accordion-toggle 类的锚点。这会让他们指向正确。

【参考方案1】：

你也可以试试这个。仅限 CSS。

.navbar-nav .dropdown.open .caret
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);

【参考方案2】：

在 Bootstrap V4 中，他们删除了 Glyphicons。下面的代码将根据您的需要运行良好。 对于下拉图标样式，您可以使用 font awesome。

[data-toggle="collapse"]:after 
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  content: "\f054";
  transform: rotate(90deg) ;
  transition: all linear 0.25s;
     
[data-toggle="collapse"].collapsed:after 
  transform: rotate(0deg) ;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-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="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-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="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-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>

这里是codepen demo link

注意：在您的演示链接中，他们使用了 Bootstrap V3。

【讨论】：

它对我有用。谢谢你。你是真的，它是 Bootstrap3 的一个例子。在您的示例中，插入符号是构造的。正如您所提到的，很高兴看到带有字体真棒图标的示例

您是否需要包含字体真棒图标的示例？

Yes..bootstrap 4 与字体真棒示例。只是一个带有切换右键的按钮。单击时，插入符号指向下方并显示一些文本。会非常有帮助..谢谢

您好，我已经根据您的需要更新了代码，并且在这里我附上了 Codepen 链接。 （codepen.io/satheesh_design/pen/rGxRBy）这对你很有用，谢谢：）

工作。谢谢你。 :)

【参考方案3】：

我用的是Vinni的解决方案，在我看来是最简单的一个，但是Chrome和Firefox的图标显示为一个框，只有Safari和Chrome手机显示正确，我挖了一些，发现新版本的Font Awesome还需要字体粗细：900；当您在自定义 css 类中使用实心图标时，虽然某些图标可能显示得很好，但我使用的插入符号 (f0d7) 没有并且需要字体粗细 900；我还使用了 font-family: 'Font Awesome\ 5 Free';而不仅仅是 font-family: 'FontAwesome';修改后的 CSS 如下所示：

.accordion-toggle:after 
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
content: "\f0d7";/
color: grey;

.accordion-toggle.collapsed:after 
content: "\f0da";

【参考方案4】：

如果您使用的是 SCSS，则有专门用于此的内置 mixin，位于 ~bootstrap/scss/mixins/_caret.scss。

caret-down、caret-up、caret-right、caret-left 和 caret($direction)。

所以，这可以变得很简单：

.panel-heading .accordion-toggle 
    @include caret(right);

    &.collapsed 
        @include caret(left);
    

或者，如果您的 html 包含 aria-expanded 属性（强烈建议这样做）

.panel-heading .accordion-toggle 
    &[aria-expanded="false"] 
        @include caret(left);
    

    &[aria-expanded="true"] 
        @include caret(right);
    
       

【讨论】：

您能否为非 css 开发人员解释更多关于 aria 扩展代码的信息？

@ZinMin 我在这里使用 [aria-expanded] 属性作为选择器，因为它在 Bootstrap 的示例下，它会为您处理触发它 ([aria-expanded]="true|false" )。它下面没有魔法，它只是 HTML 元素的一个属性。如果您不熟悉 CSS 选择器，请查看 w3schools.com/cs-s-ref/css_selectors.asp。它总是对我有帮助:)

【参考方案5】：

这就是我如何让我的工作只使用 CSS for bootstrap 4.2 和 fontawesome。我使用了 aria 标签并为图标添加了转换，为图标使用了 span 类

CSS：

#accordionExample .btn[aria-expanded=false] span:before 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
 transition: all .5s;


#accordionExample .btn[aria-expanded=true] span:before 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
  transition: all .5s;
  -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);

HTML：

<div class="container my-5 mw-600">
  <div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">

        <a class="btn btn-link d-flex" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false">
          Collapsible Group Item #1
          <span class="ml-auto"></span></a>

    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-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="card">
    <div class="card-header" id="headingTwo">

        <a class=" btn btn-link collapsed d-flex align-items-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false">
          Collapsible Group Item #2
          <span class="ml-auto"></span>
        </a>

    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-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="card">
    <div class="card-header" id="headingThree">

        <a class="btn btn-link collapsed d-flex" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false">
          Collapsible Group Item #3<span class="ml-auto"></span>
        </a>

    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-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>
</div>

演示：https://codepen.io/anon/pen/XoLgbY

【参考方案6】：

这是我使用 Bootstrap4-CSS-fontAwesome 和没有 JS/JQuery 的 got this working。

<a class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId">
  click
</a>

<div id="anyId" class="collapse">
    Hi
</div>

<!-- CDNs for font-awesome, bootstrap, JQuery -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

.css

.accordion-toggle:after 
  font-family: 'FontAwesome';/* essential to enable caret symbol*/
  content: "\f0d7";/* adjust as needed, taken from font-awesome.css */
  color: grey;

.accordion-toggle.collapsed:after 
  /* symbol for "collapsed" panels */
  content: "\f0da";  /* adjust as needed, taken from font-awesome.css */

谢谢@Satheesh Kumar