jquery - 使用 jQuery 为 标签加载更多功能

Question

我有<li class="level1> <ul class="level1"> <li class="level2">在 foreach 循环中。我必须在大型菜单中加载更多链接。

从上图中，我想在所有 li 中加载更多链接标签如果超过 5 个 li ,

我把jQuery放在下面为此，但它不起作用。谁能帮帮我？

<script type="text/javascript">
jQuery(document).ready(function () {


    size_li = jQuery(".level1 li").size();
    x=5;
    jQuery('.level1 li":lt('+x+')').show();
    jQuery('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        jQuery('.level1 li":lt('+x+')').show();
    });
});
</script>

同时添加 css

<style type="text/css">
.level1 li{
     display:none;
}
</style> 

低于输出

Answer 1

基于 .size() manual

.size() version is deprecated: 1.8, removed: 3.0. So use .length instead –

但是您可以将代码更改为这样(更好的方法):-

jQuery(document).ready(function () {
    jQuery('ul.level1').each(function(){
      if(jQuery(this).children('li').length>5){
        jQuery(this).children('li:lt(5)').show();
        jQuery(this).append('<button class="loadMore">LoadMore</button>');
      }
    });   
    jQuery('ul.level1').on("click",'.loadMore',function (){
        jQuery(this).parent('.level1').children('li:gt(4)').show(); // use gt instead of lt
        jQuery(this).removeClass('loadMore').addClass('loadLess').text('LoadLess'); 
    });
    jQuery('ul.level1').on("click",'.loadLess',function () {
        jQuery(this).parent('.level1').children('li:gt(4)').hide(); // use gt instead of lt
        jQuery(this).removeClass('loadLess').addClass('loadMore').text('LoadMore'); 
    });
});

工作示例代码:-

jQuery(document).ready(function () {
    jQuery('ul.level1').each(function(){
      if(jQuery(this).children('li').length>5){
        jQuery(this).children('li:lt(5)').show();
        jQuery(this).append('<button class="loadMore">LoadMore</button>');
      }
    });   
    jQuery('ul.level1').on("click",'.loadMore',function (){
        jQuery(this).parent('.level1').children('li:gt(4)').show(); // use gt instead of lt
        jQuery(this).removeClass('loadMore').addClass('loadLess').text('LoadLess'); 
    });
    jQuery('ul.level1').on("click",'.loadLess',function () {
        jQuery(this).parent('.level1').children('li:gt(4)').hide(); // use gt instead of lt
        jQuery(this).removeClass('loadLess').addClass('loadMore').text('LoadMore'); 
    });
});

.level1{
float:left;
width:25%;
}
.level1 li{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="float:left:width:100%">
  <ul class="level1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
   <ul class="level1">
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>
  <ul class="level1">
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
  </ul>
</div>

看到您的网站 HTML 后，将您的代码替换为以下给定代码:-

jQuery(document).ready(function () {
    jQuery('ul.level1').each(function(){
      if(jQuery(this).children('li').length){
        jQuery(this).children('li:lt(5)').show();
        jQuery(this).append('<button class="loadMore">LoadMore</button>');
      }
    });   
    jQuery('.loadMore').click(function () {
        jQuery(this).parent('ul.level1').children('li:gt(5)').show(); // use gt instead of lt
    });
});