jquery显示/隐藏 [英] Jquery Show/hide

问题描述

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

  $（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/

解决方案

使用 toggle ：

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

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

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

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

http://jsfiddle.net/Armgh/

编辑

使用 slideUp / slideDown ，你可以这样做：

  $（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/

或使用 slideToggle

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

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

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显示/隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！