긴 텍스트를 읽을 때 일반적으로 클릭이 발생합니다. 확장 또는 축소 버튼을 사용하면 이 효과는 분명히 사용자 경험을 향상시키는 데 도움이 됩니다. 그런 다음 jquery를 사용하여 클릭 확장 및 축소 효과를 얻고 위쪽 및 아래쪽 방향으로 확장 및 숨기기 효과를 얻으려면 jQuery에서 SlideUp() 및 SlideDown() 메서드를 사용하여 얻을 수 있습니다.
아래에서는 특정 코드 예제를 기반으로 클릭 확장 및 축소 효과를 얻기 위한 jquery 메서드를 소개합니다 .
코드 예는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery实现点击展开收缩效果示例</title>
<style type="text/css">
.box{
width: 400px;
background: #f0e68c;
border: 1px solid #a29415;
}
.box-inner{
padding: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slide-up").click(function(){
$(".box").slideUp();
});
$(".slide-down").click(function(){
$(".box").slideDown();
});
});
</script>
</head>
<body>
<button type="button" class="slide-up">关闭</button>
<button type="button" class="slide-down">展开</button>
<hr>
<div class="box">
<div class="box-inner">新浪娱乐讯 据台湾媒体报道，2018MAMA香港场14日晚间7点盛大展开颁奖典礼，嘻哈、性感、抒情各种团体
合作的舞台表演精彩绝伦，《ETtoday》全程独家直播典礼现场，为观众快速整理8大看点，从防弹RM流利的英文演讲开场，到最后防弹内
心告白曾想解散，全场零冷场。</div>
</div>
</body>
</html>위 코드에서는 닫기 및 확장 버튼을 클릭하면 텍스트가 포함된 상자와 상자 내부라는 두 개의 div를 만들었습니다. , SlideUp() 및 SlideDown() 메서드가 각각 호출됩니다.
slideUp() 메서드는 요소가 이미 표시되어 있는 경우 슬라이딩 효과를 사용하여 선택한 요소를 숨깁니다.
slideDown() 메소드는 슬라이딩 효과를 사용하여 숨겨진 선택된 요소를 표시합니다.
최종 효과는 다음과 같습니다.
참고 : SlideDown()이 적합합니다. 메서드에 의해 숨겨진 jQuery 요소를 전달하거나 CSS에서 display:none 선언에 의해 숨겨진 요소를 전달합니다(visibility:hidden에 의해 숨겨진 요소에는 적용되지 않음).
이 글은 클릭 확장 및 축소 효과를 얻기 위한 jquery의 구체적인 방법에 관한 것입니다. 매우 간단합니다.
위 내용은 클릭 확장 및 축소 효과를 얻기 위해 jquery를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
