WooCommerce移动端菜单slideToggle切换速度不生效问题求助

核心问题根源 #

• jQuery slideToggle 无效：.wpbsearchform 内部的 #searchform 使用了 position: fixed，该元素脱离文档流导致父元素高度无法被撑开（始终为固定值或0）。而 slideToggle 是通过修改元素height实现动画的，父元素没有高度变化空间，因此动画完全无法显示。
• CSS transition 无效：同时使用jQuery动画（直接修改style属性）和CSS过渡会产生冲突；且display: none与display: block之间无法通过CSS过渡实现动画，过渡仅支持可计算属性（如max-height、opacity等）。

方案1：修复jQuery slideToggle 动画 #

1. 调整搜索表单定位

将#searchform的fixed定位改为relative，让它留在父元素文档流中以撑开高度：

@media only screen and (max-device-width: 1024px) {
    .wpbsearchform form#searchform {
        left: 0;
        width: 100% !important;
        position: relative !important; /* 替换fixed为relative */
        top: unset !important;
        bottom: auto; /* 移除bottom定位 */
        background: url(/wp-content/uploads/2023/11/Mobile-Store-bottom-120-noresize.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-position-y: top;
        padding: 10px !important;
        box-sizing: border-box;
        height: 60px;
    }
}

2. 修正初始显示状态

移除HTML中的style="display:none"，改用jQuery初始化隐藏，避免inline样式与CSS冲突：
修改PHP插入代码：

array_splice($items_array, 2, 0, '<li class="search search-wpb"><a class="search-icon"><i class="fas fa-search"></i></a><div class="wpbsearchform">'. get_search_form(false) .'</div></li>');

更新jQuery代码：

jQuery(document).ready(function($){
    // 初始化隐藏搜索表单
    $(".wpbsearchform").hide();
    
    $(".search-icon").click(function() {
        $(".wpbsearchform").slideToggle(200);
    });

    $(document).keyup(function(e) {
        if (e.key == "Escape") {
          $(".wpbsearchform").slideUp(200); // 用slideUp避免误触发切换
        }
    });
});

3. 调整父元素样式

@media only screen and (max-device-width: 1024px) {
    .wpbsearchform{
        display: none; /* CSS默认隐藏，配合jQuery动画 */
        position: absolute;
        right: 0;
        bottom: 60px;
        z-index: 9999;
        background-color: rgba(200,199,197,0.8);
        padding: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.15);
        box-shadow: 0 1px 10px rgba(0,0,0,0.15);
        border: none;
    }
}

方案2：改用CSS Transition实现滑出效果 #

如果更倾向纯CSS过渡，完全替代jQuery动画：

1. 更新CSS样式

用max-height替代display实现过渡：

@media only screen and (max-device-width: 1024px) {
    .wpbsearchform{
        position: absolute;
        right: 0;
        bottom: 60px;
        z-index: 9999;
        background-color: rgba(200,199,197,0.8);
        padding: 0;
        border-radius: 0;
        -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.15);
        box-shadow: 0 1px 10px rgba(0,0,0,0.15);
        border: none;
        max-height: 0; /* 默认高度为0 */
        overflow: hidden; /* 隐藏超出内容 */
        transition: max-height 200ms ease; /* 过渡动画 */
    }

    /* 激活类：展开高度 */
    .wpbsearchform.active{
        max-height: 100px; /* 设置足够容纳表单的高度 */
    }
}

2. 修改jQuery代码

通过添加/移除类控制显示：

jQuery(document).ready(function($){
    $(".search-icon").click(function() {
        $(".wpbsearchform").toggleClass("active");
    });

    $(document).keyup(function(e) {
        if (e.key == "Escape") {
          $(".wpbsearchform").removeClass("active");
        }
    });
});

额外注意事项 #

• 确保WordPress已正确加载jQuery，可在functions.php中添加：

function enqueue_jquery() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'enqueue_jquery');

• 用浏览器开发者工具检查是否有其他CSS规则覆盖目标元素样式。

内容的提问来源于stack exchange，提问作者JapeNZ