jQuery slideToggle（）不显示：元素之前

Posted 2023-03-06

【中文标题】jQuery slideToggle（）不显示：元素之前

【英文标题】：jQuery slideToggle() not showing :before element

【发布时间】：2014-06-30 02:37:34

【问题描述】：

如果我只使用 css 而不是显示 .nav-main:before 元素，但使用 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;
        
    

【问题讨论】：

我在你的 CSS 中没有看到“当前”类。

那是.menu-toggle 元素，我认为与.nav-main:before 无关！

你说“它不是切换那个元素”，我不明白，但是在你的 JS 中切换的是“当前”类。所以也许你的CSS应该适用于.current而不是.nav-main？

请用html发布你的整个菜单代码

你能发布你的整个代码吗？更好，如果可能的话，也添加一个 jsfiddle 演示？

【参考方案1】：

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

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

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

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