扫码关注官方订阅号
点击同一个按钮,第一次点击显示下拉框,第二次点击隐藏下拉框,这个功能怎么实现呢?我想的是设置一个flag,每次点击之后,此flag都被改为true或false来实现,不知道是否合理?大家还有更好的办法吗?
学习是最好的投资!
一般有两种方案:
直接用toggleClass,这种方案比较适合只有简单“显示/隐藏”的场景,操作对象的默认属性(初始状态)置为display:none;,然后加个.show{display:block;}的类,然后直接在事件回调里$('#menu').toggleClass('show');就好。
display:none;
.show{display:block;}
$('#menu').toggleClass('show');
还有种方案是用.data(),即给显示对象的DOM上加个data-*属性比如data-show='false',这样事件处理时就可以通过类似$('#menu').data('show')的语句判断状态执行操作,这种比较适合有比较复杂状态的场景,而且还有个好处是一般不用担心多个变量冲突的问题。
.data()
data-*
data-show='false'
$('#menu').data('show')
合理 建议不要定为全局变量,标识尽量使用自定义属性
可以这样做。或者通过class来判断,比如如果现在处于classA,说明现在是隐藏的,当点击后,切换到classB,如果是classB,点击的话就变成classA
判断下拉框存在就隐藏,不存在就显示,那么明显的标识放在那里,为什么还要用全局变量
jQuery有toggleClass(),有删无加;你也可以根据这个思路来,点击验证是否有某个class或者元素上的自定义数据data-active之类的,再做操作。
var i=0;
$('.code').click(function() { if (i==0) { 显示; i=1 }else{ 隐藏; i=0 } return false; });
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
一般有两种方案:
直接用toggleClass,这种方案比较适合只有简单“显示/隐藏”的场景,操作对象的默认属性(初始状态)置为
display:none;,然后加个.show{display:block;}的类,然后直接在事件回调里$('#menu').toggleClass('show');就好。还有种方案是用
.data(),即给显示对象的DOM上加个data-*属性比如data-show='false',这样事件处理时就可以通过类似$('#menu').data('show')的语句判断状态执行操作,这种比较适合有比较复杂状态的场景,而且还有个好处是一般不用担心多个变量冲突的问题。合理
建议不要定为全局变量,标识尽量使用自定义属性
可以这样做。
或者通过class来判断,比如如果现在处于classA,说明现在是隐藏的,当点击后,切换到classB,如果是classB,点击的话就变成classA
判断下拉框存在就隐藏,不存在就显示,那么明显的标识放在那里,为什么还要用全局变量
jQuery有toggleClass(),有删无加;
你也可以根据这个思路来,点击验证是否有某个class或者元素上的自定义数据data-active之类的,再做操作。
var i=0;