클릭 확장 및 축소 효과를 얻기 위해 jquery를 사용하는 방법-HTML 지식-php.cn

클릭 확장 및 축소 효과를 얻기 위해 jquery를 사용하는 방법

藏色散人

풀어 주다： 2019-05-11 17:57:50

원래의

12387명이 탐색했습니다.

긴 텍스트를 읽을 때 일반적으로 클릭이 발생합니다. 확장 또는 축소 버튼을 사용하면 이 효과는 분명히 사용자 경험을 향상시키는 데 도움이 됩니다. 그런 다음 jquery를 사용하여 클릭 확장 및 축소 효과를 얻고 위쪽 및 아래쪽 방향으로 확장 및 숨기기 효과를 얻으려면 jQuery에서 SlideUp() 및 SlideDown() 메서드를 사용하여 얻을 수 있습니다.

클릭 확장 및 축소 효과를 얻기 위해 jquery를 사용하는 방법

아래에서는 특정 코드 예제를 기반으로 클릭 확장 및 축소 효과를 얻기 위한 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() 메소드는 슬라이딩 효과를 사용하여 숨겨진 선택된 요소를 표시합니다.

최종 효과는 다음과 같습니다.

클릭 확장 및 축소 효과를 얻기 위해 jquery를 사용하는 방법