为了账号安全,请及时绑定邮箱和手机立即绑定

这段代码有什么不行的地方

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>toggle()方法绑定多个函数</title>

        <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>

        <link href="style.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

        <h3>toggle()方法绑定多个函数</h3>

        <input id="btntest" type="button" value="点一下我" />

        <div>我是动态显示的</div>

        

        <script type="text/javascript">

            $(function () {

                $("#btntest").bind("click", function () {

                  $("div").toggle(

                  function(){

                      $(this).css("display":"none");

                  }, 

                  function(){

                      $(this).css("display":"block");

                  })

                })

            });

        </script>

    </body>

</html>


正在回答

3 回答

 $(this).css("display":"none");   //这个写法是有问题的
 $(this).css("display","none");   //可以这样写
  $(this).css({"display":"none"});   //也可以这样写
$("#btntest").bind("click", function () {$("div").toggle()})  //这里这样写就可以了  你加两个回调只有那个div被点击时才会执行你的回调,点击按钮是不会执行的


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

kim4 提问者

非常感谢!果然如此
2015-12-11 回复 有任何疑惑可以回复我~
#2

kim4 提问者

但是这个方法还是实现不了原来要求的效果,点击按键时隐藏,再次点击时出现.css实现不了吗?
2015-12-11 回复 有任何疑惑可以回复我~

首先是CSS设置语法有错误,单个属性写法是这样的:

$(this).css("display","none");       //用逗号隔开属性与值

设置多个值,用json写法:

$(this).css({
  "display":"block",
  "background-color":"red"
  });

其次是toggle()用法有误:

 定义和用法
    toggle() 方法切换元素的可见状态。
    如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
 语法
    $(selector).toggle(speed,callback,switch)

toggle()自带切换显示隐藏的功能,所以并不需要再设置CSS属性,而且里面调用的函数是在执行隐藏/显示效果后,再调用的,可以用来设置别的效果;

$(function () {
                 $("#btntest").bind("click", function () {
                  $("div").toggle(1000,function(){
                  	$('div').css('color','red');
                  });
                 
                })
            });


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

宇宙无敌626

楼上答题狂人,我这边编辑的功夫就被抢先了,哎~~~
2015-12-11 回复 有任何疑惑可以回复我~
#2

kim4 提问者

非常感谢,解答清晰明了,明白了很多!
2015-12-11 回复 有任何疑惑可以回复我~
<script type="text/javascript">
    $(function () {
        $("#btntest").toggle(function () {
                $("div").css("display","none");
            },function(){
                $("div").css("display","block");
            })
    });
</script>


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

kim4 提问者

为什么这里不用绑定点击按钮事件?绑定按钮反倒无法实现?
2015-12-11 回复 有任何疑惑可以回复我~
#2

kim4 提问者

明白了div才能有效果,按钮执行的是函数
2015-12-11 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
jQuery基础课程
  • 参与学习       154768    人
  • 解答问题       7184    个

加入课程学习,有效提高前端开发速度

进入课程

这段代码有什么不行的地方

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信