jQuery - toggleClass() 需要在刷新时开始关闭

【问题标题】：jQuery - toggleClass() needs to start closed on refreshjQuery - toggleClass() 需要在刷新时开始关闭
【发布时间】：2014-05-15 19:51:42
【问题描述】：

有没有办法让toggleClass()关闭的菜单在刷新页面后自动关闭？

调用 toggleClass() 的按钮完美运行。会话还会记住菜单是否隐藏，因此它会在刷新时执行关闭动画。是否有一种简单的方法可以在刷新时隐藏菜单而不是执行动画？

为了进一步澄清，这里是quick video I took of the issue：

initialize: function()
    {
        if(sessionStorage.getItem('sidebar.open') == 'false')
        {
            this.toggle();
        }
    },

    toggle: function()
    {
        var self = this;

        $(this.sidebarEl).toggleClass('active');

        _.each(this.contentEl, function(el)
        {
            $(el).toggleClass('active');
        });

        sessionStorage.setItem('sidebar.open',
                                $(this.sidebarEl).hasClass('active'));
    },

【问题讨论】：

标签： javascript jquery refresh toggleclass

【解决方案1】：

我假设过渡是 CSS 过渡，对吧？这就是为什么你只改变班级......

考虑可能取消转换，然后重新附加它。

CSS

.notransition { /*class to cancel transition*/
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

HTML

<div class="menu nontransition">...</div> <!-- when the page is loaded, use nontransition... -->

initialize: function()
{
    if(sessionStorage.getItem('sidebar.open') == 'false')
    {
        this.toggle();
    }
    $(this.sidebarEl).removeClass("nontransition") // Then, delete nontransition, and allow the transition to work
},

【讨论】：