如何从列表项切换到显示：无，显示：块

debugcn 发表于 Dev

梅西1

当屏幕尺寸小于 800px 时，我会显示：<a class='expand' href='#'>. . .</a>在第一个列表元素之后。目标是当 . . . 我想显示列表中的所有其他项目。我尝试使用 jQuery 中的 toggle() 方法，但它显示了如下列表：->

项目 1
项目 2
第 3 项

我想在 display: none 和 diplay: inline-block 之间切换第一个列表项之后的列表项的类。但它现在不起作用。

但我想在内联块中显示列表项。

我将锚标记附加到列表的第一个元素。这是单击锚标记时的代码。

$(".breadcumb .expand").on("click", function() {
  $("breadcumb li").toggleClass('.show');
});

$(".breadcumb li:first-child").append("<a class='expand' href='#'>. . .</a>");

.breadcumb li {
  display: inline-block;
}

.expand {
  display: none;
}

.show {
  display: inline-block;
}

.breadcumb li:nth-child(n+2) {
  display: inline-block;
}


/* When the screen width is < 800, do the following */

@media screen and (max-width: 800px) {
  .expand {
    display: inline-block;
  }
  div.uc_breadcrumb_block .breadcumb li:nth-child(n+2) {
    display: none;
  }
  div.uc_breadcrumb_block .breadcumb li:first-child {
    display: inline-block !important;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="uc_breadcrumb_block">
    <ul class="breadcumb">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>
  </div>
</div>

皮尤什·维尔玛

$(".breadcumb li:first-child").append("<a class='expand' href='#'>. . .</a>");

$(".breadcumb .expand").on("click", function(){
    $(".breadcumb li").toggleClass('show');
});

.breadcumb li{
  display: inline-block;
}

.expand {
  display: none;
}

.breadcumb li.show{
  display: inline-block;
}


/* When the screen width is < 800, do the following */
@media screen and (max-width: 800px) {
.breadcumb li{
  display: none;
}
  .expand{
    display: inline-block;
  }

  div.uc_breadcrumb_block .breadcumb li:first-child {
    display: inline-block !important;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
     <div class="uc_breadcrumb_block">
      <ul class="breadcumb">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
      </ul>
    </div>
  </div>

这是解决方案。希望能帮助到你

现在更新了代码，它只能在低于 800 像素的屏幕尺寸下工作

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。