jquery toggle show to show hide

Question

더 많은 것을 클릭 한 후 첫 번째 요소 10 개를로드하려고합니다. 스택 오버플로 솔루션을 사용하고 있습니다. 여기에서 확인할 수 있습니다. jQuery load first 3 elements, click "load more" to display next 5 elements. 이제 약간의 변경을 시도하고 있습니다. 1 : 10 개의 요소를 표시하고 태그를 추가로 표시합니다. tootle 숨기기 및 표시합니다. 2 : 더 많은 버튼을 클릭하면 모든 li 요소가 표시되고 모든 요소가로드 된 후에 더 많은 버튼을로드하면 더 적은 버튼이 표시되고 더 많은 버튼은 숨겨집니다. 숨기기하고 표시 .Thanks 것 이상의 버튼을로드 적은 표시

<ul id="myList"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
    <li>Six</li> 
    <li>Seven</li> 
    <li>Eight</li> 
    <li>Nine</li> 
    <li>Ten</li> 
    <li>Eleven</li> 
    <li>Twelve</li> 
    <li>Thirteen</li> 
    <li>Fourteen</li> 
    <li>Fifteen</li> 
    <li>Sixteen</li> 
    <li>Seventeen</li> 
    <li>Eighteen</li> 
    <li>Nineteen</li> 
    <li>Twenty one</li> 
    <li>Twenty two</li> 
    <li>Twenty three</li> 
    <li>Twenty four</li> 
    <li>Twenty five</li> 
</ul> 
<div id="loadMore">Load more</div> 
<div id="showLess">Show less</div> 

JQuery와

$(document).ready(function() { 
    size_li = $("#myList li").size(); 
    x=3; 
    $('#myList li:lt('+x+')').show(); 
    $('#loadMore').click(function() { 
     x= (x+5 <= size_li) ? x+5 : size_li; 
     $('#myList li:lt('+x+')').show(); 
    }); 
    $('#showLess').click(function() { 
     x=(x-5<0) ? 3 : x-5; 
     $('#myList li').not(':lt('+x+')').hide(); 
    }); 
}); 

CSS^O^아래와 같이

#myList li{ display:none; 
} 
#loadMore { 
    color:green; 
    cursor:pointer; 
} 
#loadMore:hover { 
    color:black; 
} 
#showLess { 
    color:red; 
    cursor:pointer; 
} 
#showLess:hover { 
    color:black; 
} 

Answer 1

동일한 :

$(document).ready(function() { 
 
    size_li = $("#myList li").size(); 
 
    x=10; 
 
    $('#myList li:lt('+x+')').show(); 
 
    if (size_li > 10) { 
 
     $('#loadMore').show(); 
 
    } 
 
    $('#loadMore').click(function() { 
 
     $('#myList li, #showLess').show(); 
 
     $(this).hide(); 
 
    }); 
 
    $('#showLess').click(function() { 
 
     $('#showLess, #myList li').hide(); 
 
     $('#loadMore, #myList li:lt('+x+')').show(); 
 
    }); 
 
});

#myList li{ display:none; 
 
} 
 
#loadMore { 
 
    display: none; 
 
    color:green; 
 
    cursor:pointer; 
 
} 
 
#loadMore:hover { 
 
    color:black; 
 
} 
 
#showLess { 
 
    display: none; 
 
    color:red; 
 
    cursor:pointer; 
 
} 
 
#showLess:hover { 
 
    color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="myList"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
    <li>Eleven</li> 
 
    <li>Twelve</li> 
 
    <li>Thirteen</li> 
 
    <li>Fourteen</li> 
 
    <li>Fifteen</li> 
 
    <li>Sixteen</li> 
 
    <li>Seventeen</li> 
 
    <li>Eighteen</li> 
 
    <li>Nineteen</li> 
 
    <li>Twenty one</li> 
 
    <li>Twenty two</li> 
 
    <li>Twenty three</li> 
 
    <li>Twenty four</li> 
 
    <li>Twenty five</li> 
 
</ul> 
 
<div id="loadMore">Load more</div> 
 
<div id="showLess">Show less</div>