如何正确地向上/向下滑动此响应式导航？

Question

我正在尝试创建类似于bootstraps响应式导航的东西。当我缩小屏幕大小以便媒体查询启动时，我点击菜单按钮，ul向下滑动。但是当我再次单击菜单按钮时，ul会朝上，但会立即向下滑动。我怎样才能防止这种情况发生？此外，奖励积分，当我点击菜单按钮并且ul向下滑动时，菜单按钮右侧的背景与ul / nav的其余部分颜色不同。有没有办法让整个导航系统保持背景一致？

这是带窗格的jsFiddle：http://jsfiddle.net/scottm28/mRbPd/

全屏：http://jsfiddle.net/scottm28/mRbPd/embedded/result/

Answer 1

我在else语句中添加了{}，现在它对我来说很好用：http://jsfiddle.net/mRbPd/1/

Answer 2

通过添加括号来修正它......

http://jsfiddle.net/mRbPd/2/

我认为不同的背景颜色是由CSS渲染错误引起的，因为它有时会正确呈现它，有时则不会。你总是可以在一个类中应用渐变，然后快速删除，然后重新应用它们，如果你非常渴望它可以工作。

这个类修复了渐变问题http://jsfiddle.net/mRbPd/3/，但我认为重新应用类是非常低效的，因为它意味着浏览器必须重绘渐变。