项目场景：
通过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="/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的值判断状态遇到的问题
