logo标签列表

Bootstrap 4 点击下拉菜单后如何改变箭头方向

htmlcssangularbootstrap-4
19

我正在尝试使用Bootstrap 4创建带小三角符号的下拉菜单（例如向右指）。 点击下拉菜单后，小三角指向应更改（例如向下）。

我已经找到了一种方法

/*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";
}

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

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

这不是重复的问题。

非常感谢...

当您最初创建手风琴时，默认情况下将collapsed类添加到具有accordion-toggle类的锚点。这将使它们指向右侧。 - Akhil Arjun
6个回答
27
在Bootstrap V4中，他们已经放弃了Glyphicons。以下代码将根据你的需要很好地工作。 对于下拉图标样式，你可以使用字体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演示链接

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

1
它对我有效。谢谢你。你是正确的，这是Bootstrap3的一个例子。在你的例子中，构建了插入符号。正如你所提到的，看到一个使用字体awesome图标的例子会很棒。 - Vinni
你需要一个包含 Font Awesome 图标的示例吗？ - Satheesh Kumar
是的，Bootstrap 4与Font Awesome的示例。只有一个带有右侧切换按钮的按钮。点击时，向下指的插入符号并显示一些文本。这将非常有帮助。谢谢。 - Vinni
1
嗨，我已根据您的需求更新了代码，并在此附上了Codepen链接。(https://codepen.io/satheesh_design/pen/rGxRBy) 这对您很有用，谢谢 :) - Satheesh Kumar
1
太棒了，谢谢！对于Bootstrap 5用户，请记得将data-toggle替换为data-bs-toggle。 - Anis R.
显示剩余5条评论
9

以下是我使用Bootstrap4-CSS-fontAwesome和无JS / JQuery 成功实现的方法。

<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

1
如果您正在使用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-expanded代码吗？ - Zin Min
@ZinMin 我在这里使用了[aria-expanded]属性作为选择器，因为它是在Bootstrap的示例中，并且它可以为您处理触发([aria-expanded]="true|false")。这并没有什么神奇的地方，它只是HTML元素上的一个属性。如果您不熟悉CSS选择器，请查看https://www.w3schools.com/cssref/css_selectors.asp，这总是对我有所帮助 :) - lambidu
1
这里是我使用Bootstrap 4.2和Fontawesome仅使用CSS使其运行的方法。我使用了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

0

你也可以尝试这个。仅使用CSS。

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

我使用了Vinni的解决方案，它对我来说是最简单的，但在Chrome和Firefox中图标显示为一个框，只有Safari和Chrome移动版正确显示，我进行了一些挖掘，并发现新版本的Font Awesome在使用自定义CSS类中的实心图标时也需要font-weight: 900;，因此虽然某些图标可能显示良好，但我使用的caret（f0d7）需要font-weight 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";
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接