Question

如果我只使用css而不是显示.nav-main：在{}元素之前，但是使用jQuery，它不会切换该元素并始终保持隐藏状态。

注意：这种情况发生在移动设备上（在Android Chrome中测试）

的jQuery

$('.menu-toggle').click(function() {
    $('.nav-main').slideToggle(100);
    $(this).toggleClass('current');
});

SCSS

.nav-main{    

    @include breakpoint(max-desktop){
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 30%;
        width: auto;
        display: block;
        z-index: 9999;
        padding:1px;
        background-color: $peter-river;
        box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.15);

        &:before{
            position: absolute;
            left: 20px;            
            top: -13px;
            content: "";
            display: block;
            width: 0; 
            height: 0; 
            border-left: 13px solid transparent;
            border-right: 13px solid transparent;
            border-bottom: 13px solid $peter-river;
        }
    }
}

Answer 1

您的:before元素超出了.nav-main元素的范围，top属性设置为-13px这一事实可以看出这一点。

jQuery slideToggle()设置overflow:hidden，这样就会隐藏任何超出框边界的内容。

一个解决方案（hacky）是在CSS中的overflow:visible!important上设置.nav-main或者在jQuery中运行一个回调函数，通过css()方法设置溢出：

$('.menu-toggle').click(function() {
    $('.nav-main').slideToggle(100, function(){
         $(this).css('overflow', 'visible');
    });
    $(this).toggleClass('current');
});

jQuery slideToggle（）没有显示：在元素之前

1 个答案: