Maison > Article > programmation quotidienne > Comment utiliser jquery pour obtenir un effet d'expansion et de réduction de clic

Comment utiliser jquery pour obtenir un effet d'expansion et de réduction de clic

藏色散人original: 2018-12-17 14:12:0712284parcourir

Lorsque nous lisons un long texte, nous cliquons généralement sur le bouton développer ou réduire. L'effet contribue évidemment à améliorer l'utilisateur. expérience. Utilisez ensuite jquery pour obtenir l'effet d'expansion et de réduction du clic, et pour obtenir l'effet d'expansion et de masquage dans le sens haut et bas, vous pouvez utiliser les méthodes slideUp() et slideDown() dans jQuery pour y parvenir.

Ci-dessous, nous vous présenterons la méthode de jquery pour obtenir l'effet d'expansion et de réduction des clics sur la base d'exemples de code spécifiques.

L'exemple de code est le suivant :

<!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>

Dans le code ci-dessus, nous avons créé deux divs, box et box-inner contenant du texte. Lorsque nous cliquons sur le bouton de fermeture ou de développement, il est ajouté. appellera respectivement les méthodes slideUp() et slideDown(). La méthode

slideUp() masque l'élément sélectionné en utilisant un effet de glissement, si l'élément est déjà affiché. La méthode

slideDown() affiche les éléments sélectionnés masqués en utilisant un effet de glissement.

L'effet final est le suivant :

Comment utiliser jquery pour obtenir un effet d'expansion et de réduction de clic

Remarque : slideDown() convient aux éléments masqués via la méthode jQuery, ou en CSS Déclarez display:none pour masquer les éléments (ne s'applique pas aux éléments masqués via visibilité:hidden).

Cet article concerne la méthode spécifique de jquery pour obtenir l'effet d'expansion et de réduction du clic C'est très simple, j'espère qu'il sera utile aux amis qui en ont besoin !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css display

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser jquery pour obtenir un effet de retournement d'imageArticle suivant：Comment utiliser jquery pour obtenir un effet de retournement d'image

Articles Liés

Voir plus