时间戳

首页 > 解决方案 > 面包屑分隔符单击

html - 面包屑分隔符单击

问题描述

我使用引导程序面包屑显示分层数据。单击分隔符>我想显示兄弟姐妹的下拉列表，当我们单击路径中的文件夹时，类似于 Windows 资源管理器。单击“Internet Explorer”后的箭头，我们会看到子文件夹

在此处输入图像描述

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

对于面包屑Parent > Item1 > Subitem1，如果我单击之间的分隔符Parent，Item1我想要一个显示Item1（活动）Item2和Item3

Parent
   Item1
     Subitem1
     Subitem2
   Item2
   Item3

不知道如何使分隔符成为下拉列表

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

您不能使用内置分隔，因为它们基于 CSS ::before。您需要它们在 HTML 中以使它们可点击。

您需要做的就是将下拉列表作为分隔符。文档：https ://getbootstrap.com/docs/4.5/components/dropdowns/

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

推荐阅读