Question

错误是您需要先按2点击“点击此处切换”才能正常工作。如何通过一次点击修复它？

   $(function(){
   $('.mobicon').click(function(){
            if($('#aside-left').is(':hidden')){
                 $('#aside-left').show();
                $('#aside-left').animate({'width':'100%'},'slow');
            }
            else{
                $('#aside-left').animate({'width':'0%'},'slow',function(){
                    $('#aside-left').hide();
                });
            }


        })
});

Answer 1

未定义左侧元素的默认显示值（Windows 10上Chrome / IE / FireFox的默认值为block，而您不需要）。根据{{3}}：

显示CSS属性指定用于元素的渲染框的类型。在HTML中，默认显示属性值取自HTML规范中描述的行为或浏览器/用户默认样式表。 XML中的默认值是内联的。

将其添加到您的css：

 #aside-left {
    display: none;
    height: 100%;
    top: 60px;
    left: 0;
    width: 0%;
    position: fixed;
    background: #111;
    overflow: hidden;
}

摘录：

$('.mobicon').click(function() {
    if ($('#aside-left').is(':hidden')) {
        $('#aside-left').show();
        $('#aside-left').animate({'width': '100%'}, 'slow');
    }
    else {
        $('#aside-left').animate({'width': '0%'}, 'slow', function () {
            $('#aside-left').hide();
        });
    }
});

#aside-left {
    display: none;
    height: 100%;
    top: 60px;
    left: 0;
    width: 0%;
    position: fixed;
    background: #111;
    overflow: hidden;
}

.mobicon{
    cursor:pointer;
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="mobicon">Click Here To Toggle</div>
<div id="aside-left">sidebar content here</div>

JQ侧边栏动画

1 个答案: