切换大于3

时间：2017-03-15 17:36:05

标签： jquery css

我有一组无序列表项，只需显示每个加载时的前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

3 个答案:

答案 0 :(得分：1)

您只需将第一行jQuery更改为：

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

<强> jsFiddle example

＆＃13;
＆＃13; 
$('ul').each(function() {
  $('li:gt(2)', this).hide()
});
$('ul').append('<li>+</li>').find('li:last').click(function() {
  $(this).siblings(':gt(2)').toggle();
});
＆＃13; 
ul li {
  list-style-type: none;
}

.container {
  display: flex;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

<小时/> 相反，您可以通过两种方式完成此操作：

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

答案 2 :(得分：0)

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

试试这个。

相关问题
最新问题