省略号不起作用

Question

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

不确定怎么做，我的一位朋友建议“使用jQuery写一个onClick函数，在函数内部只为addClass和removeClass编写代码，并在css中设置这些类的样式以显示省略。”

.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

这应该可以实现你的目标。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改

将jQuery选择器从.breadcrumbs更改为.hide。仅允许点击... /，而不是整个面包屑。

Answer 2

这是纯粹的CSS ......

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我不确定你为什么要这样做，但你仍然可以试试这个。 为home和breadcrumb之间的所有li添加一个类。让它隐藏 - 面包屑。

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