jquery 텍스트 숨기기 더 보기를 보려면 클릭하세요.

인터넷 기술의 발전으로 웹사이트의 사용자 경험이 점점 더 주목을 받고 있습니다. 웹 사이트 디자인에서는 콘텐츠를 어떻게 더 잘 표시하고 사용자의 독서 경험을 향상시킬 수 있는지가 중요한 주제가 되었습니다.

페이지 내용이 길어질 경우 페이지가 너무 길어지는 것을 방지하기 위해 일반적으로 텍스트 접기 또는 추가 클릭을 사용하여 사용자가 전체 텍스트 확장 여부를 선택할 수 있도록 합니다. 웹 개발에서 jQuery는 널리 사용되는 도구 라이브러리 중 하나입니다. 아래에서는 jQuery를 사용하여 더 많은 항목을 표시하는 효과를 얻는 방법을 보여 주는 예제를 사용합니다.

먼저 CDN을 통해 도입할 수 있는 jQuery 라이브러리를 도입해야 합니다. 또는 jQuery 라이브러리를 로컬로 다운로드하여 가져올 수 있습니다. CDN 방식을 예로 들면 코드는 다음과 같습니다.

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

다음으로 HTML에서 관련 레이아웃을 수행해야 합니다. 예:

<div class="card">
  <h2>这是一个标题</h2>
  <p>这是一段文字，可能比较长，需要进行折叠。</p>
  <a class="show-more">更多</a>
  <a class="show-less">收起</a>
</div>

이 예에서는 제목과 내용이 포함된 카드 레이아웃을 사용하고 두 개의 링크, 즉 "More"와 "Collapse"입니다.

다음으로 jQuery를 사용하여 클릭하여 더 많이 표시하는 효과를 얻을 수 있습니다. 구체적인 코드는 다음과 같습니다.

$(function() {
  // 隐藏“收起”链接
  $(".show-less").hide();
  // 获取要显示的元素
  var content = $(".card p");
  // 要显示的字符数
  var chars = 100;
  // 如果内容长度小于字符数，不进行折叠处理
  if (content.text().length > chars) {
    // 隐藏超出字符数的内容
    var short = content.text().substr(0, chars);
    var long = content.text().substr(chars);
    content.html(short + '<span class="d-inline-block ellipsis">...</span><span class="long d-none">' + long + '</span>');
    // 点击更多
    $(".show-more").click(function() {
      $(this).hide();
      $(".show-less").show();
      $(".card p .long").removeClass("d-none");
      $(".card p .ellipsis").addClass("d-none");
    });
    // 点击收起
    $(".show-less").click(function() {
      $(this).hide();
      $(".show-more").show();
      $(".card p .long").addClass("d-none");
      $(".card p .ellipsis").removeClass("d-none");
    });
  }
});

위 코드의 논리는 대략 다음과 같습니다.

1. 먼저 "Collapse" 링크를 숨깁니다. 왜냐하면 초기 상태에서 표시할 요소가 이미 축소되어 있기 때문입니다.
2. 그러면 접힐 콘텐츠 요소와 표시할 문자 수를 얻습니다.
3. 표시할 콘텐츠의 길이가 문자 수보다 작으면 접기 프로세스가 수행되지 않습니다.
4. 그렇지 않으면 문자 수를 초과하는 콘텐츠를 숨기고 끝에 추가해야 합니다. "..." 기호를 추가합니다.
5. 사용자가 "더보기" 링크를 클릭하면 콘텐츠를 확장해야 합니다. 문자 수를 초과하고 "..." 기호와 "더 보기" 링크를 숨깁니다.
6. 사용자가 "접기" 링크를 클릭하면 문자 수를 초과하는 콘텐츠를 축소하고 표시해야 합니다. "..." 기호와 "자세히" 링크.

위 논리는 사실 매우 간단하지만 주의해야 할 점이 많습니다. 아래에서는 몇 가지 핵심 사항을 설명합니다.

먼저 문자 수를 초과하는 콘텐츠를 숨기기 위해 HTML에 ".long" 클래스가 있는 요소를 추가합니다. CSS에서는 다음과 같이 정의할 수 있습니다.

.long {
  white-space: pre-wrap;
}

여기서 공백 속성을 "pre-wrap"으로 설정하여 주로 단어가 잘리는 것을 방지합니다. 브라우저에서 기본적으로 공백의 속성 값은 "normal"입니다. 즉, 줄을 자동으로 줄 바꿈하지 않고 공백이나 탭 문자가 나타날 때만 줄을 바꿉니다.

두 번째로 HTML에 ".ellipsis" 클래스의 요소를 추가하여 줄임표 "..."를 추가했습니다. CSS에서 다음과 같이 정의할 수 있습니다.

.ellipsis:before {

  font-weight: bold;
}

마지막으로 jQuery 이벤트를 바인딩할 때 클릭 이벤트가 사용된다는 점에 유의해야 합니다. HTML5의 개발로 인해 모바일 측의 클릭 이벤트는 모바일 측에서 그다지 친숙하지 않습니다. 왜냐하면 모바일 측의 터치 이벤트는 클릭 이벤트와 유사하지만 완전히 동일하지는 않기 때문입니다. 다양한 디바이스 및 브라우저와 호환되도록 하려면 jQuery의 on 메소드를 사용하여 이벤트를 바인딩하는 것이 좋습니다. 실제 필요에 따라 바인딩된 이벤트를 선택할 수 있습니다.

요약하자면, jQuery 기반의 클릭 투 쇼(click-to-show) 기능은 우리 웹사이트에 대한 좋은 사용자 경험을 제공할 수 있으며, 사용자가 모든 콘텐츠를 확장할지 여부를 더 자유롭게 선택할 수 있습니다.

위 내용은 jquery 텍스트 숨기기 더 보기를 보려면 클릭하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!