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

我想实现两次点击切换样式效果,为什么我写的代码无效?

我想实现两次点击切换样式效果,为什么我写的代码无效?

流觞醉月 2018-03-18 17:36:26
<!doctype html><html> <head> <meta charset="utf-8"> <title>无标题文档</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--[if lt IE 9]>  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <style>#panel { width: 200px; margin: 200px auto; border: 1px solid #8E2C2D; background-color: brown; text-align: center;}</style> <script> $(document).ready(function(){ var kk=$(".panel-body"); var flag=true; $("#panel").click(function(){ if(mm==true){ kk.hide(); flag=false; } else{ kk.show(); flag=true; } }) })    </script> </head> <body> <div class="panel" id="panel"> 点我显示/隐藏内容 <div class="panel-body"> Hello world! </div> </div></body></html>
查看完整描述

1 回答

已采纳
?
习惯受伤

TA贡献885条经验 获得超1144个赞

目测你这段代码就有一个问题,mm 这个变量没有定义哈。

再者,你这个应该写一个变量,记录点击次数,比你这样实现要简单。你先自己实现试下,实现不了再问我,我给你说。

查看完整回答
3 反对 回复 2018-03-18
  • 流觞醉月
    流觞醉月
    谢谢你的回答,问题刚自己得到解决了。除了mm没有定义的原因之外,还有我把var mm=ture;写在click()点击事件函数之内了,应该定义在click()之外才有效果的。 另外你说的记录点击次数来实现来回二次点击切换样式的方法怎么做?谢谢
  • 习惯受伤
    习惯受伤
    声明一个变量初试值x为1,每次点击加1,然后x%2==0 就是两次点击,其他和你的逻辑都一样
  • 流觞醉月
    流觞醉月
    <script> $(document).ready(function(){ var kk=$(".panel-body"); var sum=0; $("#panel").click(function(){ sum=sum+1; if(sum%2==0){ kk.show(1000,function(){ $("#panel").animate({ left:'+=200px', top:'+=500px', right:'+=200px', bottom:'+=500' },5000); }); } else{ kk.hide(1000).css("color","green"); } }) }) 可以,掌握了,谢谢
点击展开后面1
  • 1 回答
  • 0 关注
  • 1231 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信