                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

使用toggle的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用show()和hide()方法显示和隐藏元素</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>使用show()和hide()方法显示和隐藏元素</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    $("ul").toggle(function(){
                       if ($("#hidval").val() == 0) {
                         $("ul").show();
                         $("#hidval").val(1);
                    },function(){
                       $("ul").hide();
                       $("#hidval").val(0);
                    });
                });    
            });
        </script>
    </body>
</html>

这样写没有效果？为什么？是哪里出错了？

666图

2016-01-04

源自：jQuery基础课程 7-1

关注问题我要回答

868

操作

收起

8 回答

慕課君
2016-03-28

toggle已经在现版本被淘汰了，在老板本还是好使的。在一个使用toggle就不用show和hide。直接（“ul”）.toggle（）就可以了，在括号里还可以添加毫秒数来控制时间。如果是hide和show就不用toggle

他们都是实现一个效果的。

1 回复有任何疑惑可以回复我~

收起回答

zqbinary
2016-03-19

这代码好绕,,搞了半小时了

注意你的括号,以及语句结束的位置

上面有人指出你花括号少了一个,其实还有个地方是语句还没结束就用了分号;

code1://先改你语法错误

$(function() {

$("h4").bind("click", function() {

$("ul").toggle(function() {

if ($("#hidval").val() == 0) {

$("ul").show();

$("#hidval").val(1);

}} ,function(){

$("ul").hide();

$("#hidval").val(0);

} //function

})//toggle(function){

}); //bind 这里才算一个句子完

});

</script>

code2://然后你写的太罗嗦了,上面有个同学用的ul的toggle,稍微比你简洁些

$(function() {

$("h4").bind("click", function() {

$("ul").toggle(function() {

if ($("#hidval").val() == 0) {

$("ul").show();

$("#hidval").val(1);

} else {

$("ul").hide();

$("#hidval").val(0);

}

});

</script>

code3;//toggle本身有个用法,单击显示/隐藏,然后我又去掉了一大块,

$(function() {

$("h4").bind("click", function() {

$("ul").toggle(

/*function() {

if ($("#hidval").val() == 0) {

$("ul").show();

$("#hidval").val(1);

} else {

$("ul").hide();

$("#hidval").val(0);

}

}*/)

});

</script>

0 回复有任何疑惑可以回复我~

收起回答

1VAN1
2016-01-25

哥们，你漏了一个括号

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用show()和hide()方法显示和隐藏元素</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
     
    <body>
        <h3>使用show()和hide()方法显示和隐藏元素</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>
         
        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    $("ul").toggle(function(){
                       if ($("#hidval").val() == 0) {
                         $("ul").show();
                         $("#hidval").val(1);
                    }}/*这里少了一个括号*/,function(){
                       $("ul").hide();
                       $("#hidval").val(0);
                    });
                });    
            });
        </script>
    </body>
</html>

1 回复有任何疑惑可以回复我~

收起回答

1VAN1

是大括号，

2016-01-25 回复有任何疑惑可以回复我~

我心自飞扬
2016-01-13

$(function () {

$("h4").bind("click", function () {

$("ul").toggle(function(){

if($("input:hidden").val() == 0){

$(this).show();

$("input:hidden").val(1)

}

},function(){

if($("input:hidden").val() == 1){

$(this).hide();

$("input:hidden").val(0)

}

});

改成这样试试。。

0 回复有任何疑惑可以回复我~

收起回答

qq_苦瓜_3
2016-01-08

toggle() 章节有讲到：

注意：toggle()方法支持目前主流稳定的jQuery版本1.8.2，在1.9.0之后的版本是不支持的。

0 回复有任何疑惑可以回复我~

收起回答

啊哈哦
2016-01-04

或者你直接用

$(function () {

$("h4").bind("click", function () {

$("ul").toggle();

});

0 回复有任何疑惑可以回复我~

收起回答

啊哈哦
2016-01-04

这样写toggle是作用在ul标签上，在toggle那节有讲到，要用toggle可如下：但是有个问题就是使用<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>时，h4标签会有问题，使用<script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>版本就没问题

$(function () {

$("h4").toggle( function () {

$("ul").show();

}, function() {

$("ul").hide();

}

)

});

</script>

1 回复有任何疑惑可以回复我~

收起回答

666图提问者

还是有些不明白。为什么toggle作用在ulh4标签上就行了呢？版本问题？

2016-01-04 回复有任何疑惑可以回复我~

x_HH
2016-01-04

<script type="text/javascript">
    $(function() {
      $("h4").bind("click", function() {
        $("ul").toggle(function() {
          if ($("#hidval").val() == 0) {
            $("ul").show();
            $("#hidval").val(1);
          } else {
            $("ul").hide();
            $("#hidval").val(0);
          }
        });
      });
    });
  </script>

1 回复有任何疑惑可以回复我~

收起回答