省略号不起作用

Question

我正在尝试显示面包屑的省略号。让我们将 li 元素home/content/breadcrumb它应该显示为 home/.../breadcrumb 。省略号(...(显示是可单击的，如果用户单击它应该展开。

不知道该怎么做，我的一个朋友建议"使用 jQuery 编写一个 onClick 函数，并在函数内部编写addClass的代码，并在 css 中removeClass这些类的样式以显示省略号。

.hide {
display: none;
}

<div class="breadcrumbs">
  <ol>
    <li>
      <a href="/home/" class="hide">Home</a>
    </li>
    <li>
      <a href="/home/content" class="hide">Components</a>
    </li>
    <li>
      <a href="/home/content/breadcrumbs" class="show">Breadcrumbs</a>
    </li>
  </ol>
</div>

我不知道这是什么意思。有人可以帮忙吗？

提前谢谢。

Answer 1

这是

纯粹的CSS...

.breadcrumbs ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.breadcrumbs li {
    position: relative;
    display: none;
    float: left;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
    padding-right: 7px;
    color: #999;
}
.breadcrumbs li:first-child,
.breadcrumbs li:last-child  {
    display: inline-block;
}
.breadcrumbs li:first-child {
    margin-right: 7px;
}
.breadcrumbs li:first-child::after {
    content: "/... /";
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    margin-top: 0;
    right: -10px;
}
.breadcrumbs li a {
    line-height: 14px;
    height: 14px;
    padding: 10px 6px;
    height: 14px;
    color: #666;
    text-decoration: none;
}
.breadcrumbs li a:hover {
    text-decoration: underline;
}

<div class="breadcrumbs">
  <ol>
    <li>
      <a href="/home/" class="hide">Home</a>
    </li>
    <li>
      <a href="/home/content" class="hide">Components</a>
    </li>
    <li>
      <a href="/home/content/breadcrumbs" class="show">Breadcrumbs</a>
    </li>
  </ol>
</div>

Answer 2

这应该可以完成你所追求的。

$('.hide').click(function() {
  $('.hide').toggleClass('hidden');
});

.hidden a { display: none; }
ol { list-style: none; }
li {
  display: inline-block;
}
li:after {
content: '/';
}
.hidden:after {
content: '... /';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="breadcrumbs">
  <ol>
    <li>
      <a href="/home/">Home</a>
    </li>
    <li class="hide hidden">
      <a href="/home/content">Components</a>
    </li>
    <li>
      <a href="/home/content/breadcrumbs" class="show">Breadcrumbs</a>
    </li>
  </ol>
</div>

编辑

将 jQuery 选择器从 .breadcrumbs 更改为 .hide 。仅允许单击... /，而不允许单击整个痕迹导航。

Answer 3

我不确定你为什么还想做，但你仍然可以尝试这个。在家庭和面包屑之间为所有 li 添加一个类。让它成为隐藏的面包屑。

.hidden-breadcrumbs{
display:none;
}
<li class="expander">...</li>
$('.expander'.click(function(){
$(this).hide();
$('.hidden-breadcrumbs').show();
});