切换大于 3 的列表项元素答案

【问题标题】：Toggle list item elements greater than 3切换大于 3 的列表项元素
【发布时间】：2017-03-15 17:36:04
【问题描述】：

我有一组无序列表项，并且只需要在加载时显示前 3 个 li 元素。当用户单击+ 符号时，剩余的列表项应仅针对单击的列表组进行切换。我相信这也可以仅使用 CSS 来完成，但要尝试使用 jQuery 来实现。

这是我当前的实现：

HTML

<div class="container">
<div class="col-lg-3">
  <div class="toggle" tabindex="1">
    <p class="header" onclick="void(0)">LINK</p>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
      <li>link 5</li>
      <li>link 6</li>
    </ul>
  </div>
</div>

<div class="col-lg-3">
  <div class="toggle" tabindex="1">
    <p class="header" onclick="void(0)">LINK</p>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
      <li>link 5</li>
      <li>link 6</li>
    </ul>
  </div>
</div>

<div class="col-lg-3">
  <div class="toggle" tabindex="1">
    <p class="header" onclick="void(0)">LINK</p>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
      <li>link 4</li>
      <li>link 5</li>
      <li>link 6</li>
    </ul>
  </div>
</div>
</div>

jQuery

$('ul li').hide().filter(':lt(3)').show();
$('ul').append('<li>+</li>').find('li:last').click(function() {
  $(this).siblings(':gt(2)').toggle();
});

JSFIDDLE：LINK

【问题讨论】：

标签： jquery css

【解决方案1】：

您可以将 jQuery 的第一行更改为：

$('ul').each(function() {
  $('li:gt(2)', this).hide()
});

jsFiddle example

$('ul').each(function() {
  $('li:gt(2)', this).hide()
});
$('ul').append('<li>+</li>').find('li:last').click(function() {
  $(this).siblings(':gt(2)').toggle();
});

ul li {
  list-style-type: none;
}

.container {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

:gt() 选择器在整个元素集合中工作，所以它只选择第一个 ul 中的前 3 个 li

相反，您可以通过两种方式进行操作：

使用 CSS :nth-child() psudo-class 选择器，其中:not() 用于避免列表中的最后一个+：

ul li:nth-child(n+4):not(:last-child) {
  display: none;
}

$('<li>+</li>').appendTo('ul').click(function() {
  $(this).parent().find('li:nth-child(n+3):not(:last-child)').toggle();
});

ul li {
  list-style-type: none;
}

.container {
  display: flex;
}

ul li:nth-child(n+4):not(:last-child) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>
</div>

使用 jQuery，使用 :nth-child() 伪类选择器。

$('ul li:nth-child(n+4)').hide();

$('ul li:nth-child(n+4)').hide();
$('<li>+</li>').appendTo('ul').click(function() {
  $(this).parent().find('li:nth-child(n+3):not(:last-child)').toggle();
});

ul li {
  list-style-type: none;
}

.container {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>
</div>

使用您自己的切换代码：

$('ul li:nth-child(n+4)').hide();
$('ul').append('<li>+</li>').find('li:last').click(function() {
  $(this).siblings(':gt(2)').toggle();
});

ul li {
  list-style-type: none;
}

.container {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="toggle" tabindex="1">
      <p class="header" onclick="void(0)">LINK</p>
      <ul>
        <li>link 1</li>
        <li>link 2</li>
        <li>link 3</li>
        <li>link 4</li>
        <li>link 5</li>
        <li>link 6</li>
      </ul>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

$('ul').each(function(){
  $(this).find('li').hide().filter(':lt(3)').show();
});

试试这个。

【讨论】：