Wordpress 通过插件的简码未按预期显示 function (Elementor Pro)

Question

JS 小提琴： https://jsfiddle.net/5fxqmb89/

正如您在我的 JS Fiddle 中看到的那样。 一切正常。 但是，在我使用 Elementor Pro 的 Wordpress 插件中，javascript 未按预期工作：

问题：无论点击多少次，下拉菜单都会继续打开。 它在一瞬间关闭然后再次打开。

这是我在 Wordpress 插件中使用的确切代码：

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> > see jsfiddle for the css </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');
?>

我将 html、脚本和 css 放在我的 function 中，因为它在简码中使用

这也是 wordpress 中的插件名称：

此外，这是 Elementor Pro 中的短代码：

这是我尝试过的：

• 重新定位脚本/html/css，其中 html 首先位于 function 内，以便 css 和脚本在之后读取它

• 一个堆栈问题建议将脚本“变成”。（单引号）。这对我来说没有任何改变

• 将 <script> 放在 function 中。与上面的下拉列表相同的问题。

需要一些关于该做什么的建议。 希望我清楚地解释了我的问题。 如果需要任何详细说明，请随时发表评论。

Answer 1

你的代码中有很多错误，我无法修复你的整个代码，但我可以给你一个指导，以便你可以更正你的代码。

1. Shortcode 的回调函数应该只return内容，如果你使用echo就会产生问题。
2. css 和 js 应该在 WordPress 中添加/入队使用脚本和样式入队函数wp_enqueue_script ， wp_enqueue_style还有一些其他函数，您将在阅读文档后了解这些函数。
3. WordPress 加载jquery.min.js ，因此您不必添加另一个jquery.slim也不需要您的代码工作。
4. global $wpdb; 行是不必要的，您没有在代码中的任何地方使用$wpdb变量。 如果您将来要使用它，请保留它。
5. 我不确定您的代码是否需要 bootstrap js/css 和 popper js，如果不需要，那么最好也删除这些东西。
6. 在您的 CSS class 中添加前缀，以避免与来自核心/主题/插件的其他 CSS 类发生任何冲突，或者使用容器 class 并使用父节点 foreach 节点和 select 子节点。