더 많은 / 더 적은 텍스트 기능을 만들어야하는데 JavaScript와 HTML 만 있으면됩니다. jQuery와 같은 추가 라이브러리를 사용할 수 없으며 CSS로도 할 수 없습니다.
적절한 설명없이 완전한 솔루션을 제공하는 것은 좋지 않습니다. 그래서 저는 반쯤 만든 해결책 만 만들었습니다.
html :
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ligula id neque pharetra luctus. Nulla in luctus tortor. Nullam non lectus tellus. Pellentesque maximus rutrum dolor, aliquet dapibus lectus dignissim eu. Fusce non blandit risus. Suspendisse fermentum ipsum justo, vitae finibus risus convallis non. Proin euismod euismod orci, suscipit sodales sem fringilla sed. Maecenas iaculis ac elit cursus efficitur. Vivamus at bibendum purus, non molestie libero. Donec fermentum ante non diam bibendum, nec consectetur orci gravida. APPLES FOR SALE! <br>
<a href="#" id="js-more">Show more!</a>
<span id="js-hidden">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque faucibus felis eget auctor ultricies. Cras vel posuere lorem. Etiam tincidunt maximus magna. Phasellus eu nisi quam. Curabitur dictum felis ut vulputate rhoncus. Aliquam et odio justo. Morbi sit amet lectus sit amet nulla lobortis tempor et et nulla. Proin eget posuere nunc, ac tristique turpis. Curabitur elementum maximus dolor, ac vehicula dui dictum at. Integer libero nisi, pulvinar a turpis pretium, rhoncus suscipit erat. In auctor odio ut odio aliquam malesuada at at quam. Fusce lobortis, diam euismod tempor luctus, diam mi venenatis lectus, sed tempus neque risus et neque. Fusce id vestibulum nunc, at gravida leo. Morbi fringilla dolor ac molestie aliquet.
</span>
<p>
Node.js : var hiddenText = document.getElementById ( 'js-hidden'); var toggleButton = document.getElementById ( 'js-more'); hiddenText.style.display = '없음'; hiddenText.className = '숨김';
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
toggleButton.onclick = function toggleText(){
console.log("click happens");
if(hasClass(hiddenText, 'hidden') == 1)
{
console.log("true");
hiddenText.style.display = 'block';
hiddenText.className = '';
}
else
{
console.log("false");
hiddenText.style.display = 'none';
hiddenText.className = 'hidden';
}
return false;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다