我使用bootstrap breadcrumb显示分层数据。 单击分隔符>我想要显示兄弟的下拉列表，类似于当我们单击路径中的文件夹时windows资源管理器。 点击“Intenet Explorer”后面的箭头，可以看到子文件夹
null
.breadcrumb-item + .breadcrumb-item::before {
content: ">";
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Parent</a></li>
<li class="breadcrumb-item"><a href="#">Item1</a></li>
<li class="breadcrumb-item active" aria-current="page">Subitem1</li>
</ol>
</nav>null
用于breadcrumb父级>； 项目1>； subitem1如果单击parent和item1之间的分隔符，则需要显示item1（活动）item2和item3的下拉列表
Parent
Item1
Subitem1
Subitem2
Item2
Item3
不确定如何使分隔符成为下拉列表
您不能使用内置分离，因为它们基于CSS::Before。 您需要它们在HTML中，以使它们可点击。
你所需要做的就是把下拉列表作为分隔符。 文档:https://getbootstrap.com/docs/4.5/components/dropdowns/
null
.breadcrumb-item + .breadcrumb-item::before {
display: none !important;
}
.breadcrumb .dropdown.show .arrow {
transform: rotate(90deg);
text-decoration: none;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Parent</a> > </li>
<li class="breadcrumb-item">
<a href="#">Item1</a>
<div class="dropdown d-inline">
<a class="d-inline-block arrow" href="javascript:" data-toggle="dropdown">
>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Item1</a>
<a class="dropdown-item" href="#">Item2</a>
<a class="dropdown-item" href="#">Item3</a>
</div>
</div>
</li>
<li class="breadcrumb-item active" aria-current="page">Subitem1</li>
</ol>
</nav>