WordPress插件短代码在Elementor Pro中下拉功能异常求助

现象 #

在JS Fiddle环境中下拉功能运行正常，但在使用Elementor Pro的WordPress站点中，下拉菜单出现异常：点击后会瞬间关闭随即重新打开。

实现方式 #

通过自定义短代码嵌入功能，将HTML、CSS、JS及依赖资源封装在PHP函数中：

function locationsfunction(){
    echo'<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
         <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css">
         <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>';
    global $wpdb;
?>

<div class="select-menu">
    <div class="location-btn">
      <span class="location-text">Location</span>
      <i class="bx bx-chevron-down"></i>
    </div>
  
    <ul class="options">
      <li class="option">
        <span class="option-text">Florida</span>
      </li>
      <li class="option">
        <span class="option-text">Georgia</span>
      </li>
      <li class="option">
        <span class="option-text">Texas</span>
      </li>
    </ul>
</div>

<style> /* CSS样式参考JS Fiddle中的实现 */ </style>

<script>
    const optionMenu = document.querySelector('.select-menu'),
    location_btn = optionMenu.querySelector('.location-btn'),
    options = optionMenu.querySelectorAll('.option'),
    location_text = optionMenu.querySelector('.location-text');

    location_btn.addEventListener('click', () => optionMenu.classList.toggle('active'));

    options.forEach((option) => {
    option.addEventListener('click', () => {
        let selectedOption = option.querySelector('.option-text').innerText;
        location_text.innerText = selectedOption;

        optionMenu.classList.remove('active');
    });
        });
</script>

<?php
}
add_shortcode('locationsoutput','locationsfunction');
?>

相关环境截图：

• 插件名称：
• Elementor中短代码使用：

已尝试的解决方案 #

• 调整函数内HTML、脚本、CSS的加载顺序，优先加载HTML结构
• 将脚本中的双引号替换为单引号
• 确保脚本代码完全包裹在函数内部

推荐解决思路 #

1. 阻止事件冒泡（最可能的原因） #

点击下拉选项时，事件会冒泡到父元素.location-btn，触发其click事件导致active类被再次切换（先移除后添加）。在选项的点击事件中加入阻止冒泡的代码：

options.forEach((option) => {
    option.addEventListener('click', (e) => {
        e.stopPropagation(); // 阻止事件向上冒泡
        let selectedOption = option.querySelector('.option-text').innerText;
        location_text.innerText = selectedOption;
        optionMenu.classList.remove('active');
    });
});

2. 避免重复引入jQuery #

代码中同时引入了jQuery Slim版和完整版，可能导致冲突，建议只保留一个版本（比如移除Slim版，使用完整版）。

3. 确保脚本在DOM加载完成后执行 #

Elementor的DOM结构加载可能有延迟，将JS代码包裹在DOMContentLoaded事件中，确保元素已存在再绑定事件：

document.addEventListener('DOMContentLoaded', function() {
    const optionMenu = document.querySelector('.select-menu'),
    location_btn = optionMenu.querySelector('.location-btn'),
    options = optionMenu.querySelectorAll('.option'),
    location_text = optionMenu.querySelector('.location-text');

    location_btn.addEventListener('click', () => optionMenu.classList.toggle('active'));

    options.forEach((option) => {
        option.addEventListener('click', (e) => {
            e.stopPropagation();
            let selectedOption = option.querySelector('.option-text').innerText;
            location_text.innerText = selectedOption;
            optionMenu.classList.remove('active');
        });
    });
});

4. 排查CSS样式冲突 #

检查Elementor的默认样式是否覆盖了.select-menu.active的样式，可通过浏览器开发者工具查看样式优先级，必要时给自定义CSS添加更具体的选择器（比如添加父元素类名）来提高优先级。

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