项目场景：

通过jQuery的slideToggle()方法实现元素的显示隐藏时，利用当前ul元素display的值判断状态，点击当前p标签时，显示隐藏兄弟元素ul，当ul显示时p为灰色，隐藏则p为蓝色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}p{width: 200px;height: 40px;line-height: 40px;text-align: center;background: #227FC6;margin-bottom: 2px;color: #fff;}ul{display: none;}li{list-style: none;background: #000;color: #fff;width: 200px;height: 30px;line-height: 30px;text-align: center;border-bottom: 1px solid #ccc;}</style>
</head>
<body><div id="box"><div><p>北京景点</p><ul ><li>故宫</li><li>十三陵</li><li>圆明园</li><li>长城</li></ul></div><div><p>上海景点</p><ul ><li>东方明珠</li><li>外滩</li><li>豫园</li><li>龙华寺</li></ul></div><div><p>广州景点</p><ul ><li>白云山</li><li>中山纪念堂</li><li>华南植物园</li><li>越秀公园</li></ul></div><div><p>深圳景点</p><ul ><li>世界之窗</li><li>东门老港</li><li>海上田园旅游区</li><li>中信明思克航母</li></ul></div><div><p>厦门景点</p><ul ><li>鼓浪屿</li><li>集美嘉庚园</li><li>万石植物园</li><li>方特梦幻王国</li></ul></div></div><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(function(){$('p').click(function(){console.log("::::1",$(this).next().css('display'))// 为所有ul绑定显示隐藏事件事件$(this).next().slideToggle()console.log("::::2",$(this).next().css('display'))// 隐藏当前以外的ul$(this).parent().siblings().children('ul').hide(0)// 判断ul的状态if($(this).next().css('display')=='block'){$(this).css('background','#555')$(this).parent().siblings().children('ul').prev().css('background','#227FC6')}else{$(this).css('background','#227FC6')}})})</script>
</body>
</html>

问题描述：

点击第一次显示，console.log()打印当前ul的display值分别为：初始值none 和 slideToggle()改变后的 block

第二次点击相同位置隐藏，console.log()打印当前ul的display值分别为：block和 slideToggle()改变后的 block ，打印显示 slideToggle()没有将值改变为 none 导致进判断的永远是block，但是浏览器的显示结果确实隐藏了

原因分析：

经过观察发现原因是 slideToggle()在执行的时候默认过渡效果需要一定时间，当点击第二次时，height在不断减小，元素还在隐藏的过程中，这个过程display仍然为block，console.log()就已经出结果了

解决方案：

最简单的办法就是在 $(this).next().slideToggle(0) 把时间设置为0，没有过渡时间就不存在问题

也可以把if判断放到最前面

通过jQuery的slideToggle()方法实现元素的显示隐藏时，利用当前ul元素display的值判断状态遇到的问题相关推荐

jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
隐藏导航条HTML,jQuery实现的导航条切换可显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: 导航条在项目中的应用 $(function(){ ...
用jQuery实现一些导航条切换，显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 源码下载地址代码如下: <!DOCTYPE html ...
Atitit.判断元素是否显示隐藏在父元素 overflow
Atitit.判断元素是否显示隐藏在父元素 overflow 1.1. scrollTop 指的是元素的滚动条顶端距离原生基线的高度...1 1.2. 判断元素是否显示隐藏在父元素 $(next) ...
jquery 实现背景图片循环切换，显示隐藏div
jquery实现图片背景循环切换,显示隐藏一个div. <script type="text/javascript"> $(function(){ $("#t ...
CSS学习221~249（定位+元素的显示隐藏）
1 定位 1.1 为什么需要定位浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 1.2 ...
vue 点击当前元素进行显示隐藏，上次点过的元素隐藏
功能描述:当一直点击2时,切换显示隐藏, 当2展开时,在点击1时,2隐藏,1显示. <ul id="mttUl" class="mttUl">< ...
angularjs与jquery特效slidetoggle结合
之前使用jquery的slidetoggle方法,可以轻易的实现元素的收缩展开:使用angularjs后,没有找到相关的方法,通过多方面查资料,自己写了个demo,展示slidetoggle的angu ...
miniui mysql_MiniUi系列 jQuery 事件 - delegate() 方法
当点击鼠标时,隐藏或显示 p 元素: $("div").delegate("button","click",function(){ $(&q ...

通过jQuery的slideToggle()方法实现元素的显示隐藏时，利用当前ul元素display的值判断状态遇到的问题

项目场景：

问题描述：

原因分析：

解决方案：

通过jQuery的slideToggle()方法实现元素的显示隐藏时，利用当前ul元素display的值判断状态遇到的问题相关推荐

最新文章

热门文章