jQuery slideToggle()不显示:before元素

jQuery slideToggle() not showing :before element

本文关键字：before 元素 显示 slideToggle jQuery      更新时间：2023-09-26

如果我只使用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;
        }
    }
}

您的:before元素在.nav-main元素的边界之外，这可以从top属性设置为-13px的事实中看出。

jQuery slideToggle()设置overflow:hidden，所以这将隐藏框外的任何内容。

一个解决方案(hacky)将overflow:visible!important设置在.nav-main在CSS或在jQuery中运行一个回调函数设置的溢出可见通过css()方法:

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