jquery显示/隐藏 | jquery显示

本文介绍了jquery显示/隐藏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图为显示/隐藏功能制作简单的jQuery代码。
但是我仍然犯了错误。

  $（document）.ready（function（）{
 $（'。arrow'）。click（function（）{
 $（'＃box'）。show（slow）; 
}）; 
 
 $（'。arrow'）。click（function（）{
 $（'＃box'）。hide（slow）; 
}）; 
 $（'。arrow' ）.click（function（）{
 $（'＃box'）。show（slow）; 
}）; 
}）;

解决方案

使用：

<$ p $ （）函数（）{
$（'＃box'）。toggle （'slow'）;
}）;
}）;

或者您可以保存您的状态并手动切换：

  $（document）.ready（function（）{
 var hidden = false; 
 $（'。arrow'）。点击（function（）{
 if（hidden）{
 hidden = true; 
 $（'＃box'）。hide（slow）; 
} else {
 hidden = false; 
 $（'＃box'）。show（slow）; 
} 
}）; 
}）;

编辑

使用 / ，你可以这样做：

  $（document）.ready（function（）{
 var hidden = false; 
 $（'。arrow'） .click（function（）{
 if（hidden）{
 hidden = false; 
 $（'＃box'）。slideDown（slow）; 
} else { 
 hidden = true; 
 $（'＃box'）。slideUp（slow）; 
} 
}）; 
}）;

或使用

  $（document）.ready（function（）{ 
 $（'。arrow'）。click（function（）{
 $（'＃box'）。slideToggle（slow）; 
}）; 
}） ;

I'm trying to make simple jquery code for show/hide function.But still I'm doing something wrong.

$(document).ready(function(){
    $('.arrow').click(function() {
        $('#box').show("slow");
    });

    $('.arrow').click(function() {
        $('#box').hide("slow");
    });
    $('.arrow').click(function() {
        $('#box').show("slow");
    });
});

http://jsfiddle.net/Armgh/

解决方案

use toggle:

$(document).ready(function(){
    $('.arrow').click(function() {
        $('#box').toggle('slow');
    });
});

http://jsfiddle.net/Armgh/1/

or you can save your status and toggle manually:

$(document).ready(function(){
    var hidden = false;
    $('.arrow').click(function() {
        if (hidden) {
            hidden = true;
            $('#box').hide("slow");
        } else {
            hidden = false;
            $('#box').show("slow");
        }
    });
});

http://jsfiddle.net/Armgh/

EDIT

to use slideUp/slideDown, you can do:

$(document).ready(function(){
    var hidden = false;
    $('.arrow').click(function() {
        if (hidden) {
            hidden = false;
            $('#box').slideDown("slow");
        } else {
            hidden = true;
            $('#box').slideUp("slow");
        }
    });
});

http://jsfiddle.net/Armgh/3/

or use slideToggle

$(document).ready(function(){
    $('.arrow').click(function() {
        $('#box').slideToggle("slow");
    });
});

http://jsfiddle.net/Armgh/4/

这篇关于jquery显示/隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！