Question

当屏幕尺寸小于800px时，我将在第一个列表元素之后显示<a class='expand' href='#'>. . .</a>。目的是当。。。单击我要显示列表中的所有其他项目。我尝试使用jQuery中的toggle（）方法，但它显示了这样的列表： ->

item1
item2
item3

我想在显示：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

<button id="btn">Click</button>
<div class="class1 toggle">
  <p>Hello Everyone</p>
</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;
  }
}

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

现在更新了代码，仅在800px屏幕尺寸以下才能使用

如何将类别从列表项切换到显示：无，显示：阻止

2 个答案: