使用Bootstrap 4,我尝试使用插入符创建一个下拉列表(例如：指向右侧).在点击下拉列表时,应更改插入符指示方向(例如：向下).

我有一个way to do that

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

<ahttps://www.jb51.cc/tag/dio/" target="_blank">dion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapSEOne">
          Collapsible Group Item #1
</a>

<div id="collapSEOne">
      <div>
        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,因为我的应用程序是角度4.想尽可能避免使用JQuery / JS.

这不是duplicate的问题.

提前谢谢了…

在Bootstrap V4中,他们放弃了Glyphicons.下面的代码将根据您的需要很好地工作.
对于下拉图标样式,您可以使用字体真棒.

[data-toggle="collapse"]:after {
display: inline-block;
    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>
    <divrole="tab" id="headingOne">
      <h5>
        <a data-toggle="collapse" href="#collapSEOne" aria-expanded="true" aria-controls="collapSEOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapSEOne"role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
      <div>
        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>
    <divrole="tab" id="headingTwo">
      <h5>
        <adata-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo"role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <divrole="tab" id="headingThree">
      <h5>
        <adata-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree"role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit,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.

<div>
    <button>主题
        <span></span>
    </button>
    <ul>
        <li>
            <a>Java</a>
        </li>
        <li>
            <a>数据挖掘</a>
        </li>
        <li>
            <a>数据通信/网络</a>
        </li>
        <li>
        <li>
            <a>分离的链接</a>
        </li>
    </ul>
</div>

登录后复制