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

Question

当屏幕尺寸小于 800 像素时，我会在第一个列表元素之后显示：<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>

Answer 1

您可以使用 :not(:first-child) 选择器选择除第一个孩子以外的所有孩子

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

$(document).on("click",".breadcrumb .expand", function() {
  $(".breadcrumb li").not(":first-child").toggleClass('show');
});

.breadcrumb li {
  display: none;
}
.breadcrumb li:first-child {
  display: inline-block;
}
.breadcrumb li.show {
  display: inline-block;
}

<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="breadcrumb">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>
  </div>
</div>

Answer 2

$(".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>

这里是解决方案。希望对你有帮助

现在更新了代码，它只适用于 800px 屏幕尺寸以下