[英]Wordpress Shortcode through Plugin does not function as intended (Elementor Pro)
JS Fiddle: https://jsfiddle.net/5fxqmb89/ JS 小提琴: https://jsfiddle.net/5fxqmb89/
As you can see in my JS Fiddle.正如您在我的 JS Fiddle 中看到的那样。 everything works fine.一切正常。 However in my Wordpress plugin using Elementor Pro, the javascript is not working as intended:但是,在我使用 Elementor Pro 的 Wordpress 插件中,javascript 未按预期工作:
Issue: the dropdown keeps on opening no matter how much it gets clicked.问题:无论点击多少次,下拉菜单都会继续打开。 It closes in a split second then opens up again.它在一瞬间关闭然后再次打开。
here is the exact code I am using inside my Wordpress Plugin:这是我在 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');
?>
I placed the html, script, and css inside my function for it's use in the shortcode我将 html、脚本和 css 放在我的 function 中,因为它在简码中使用
Also here is the Plugin name within wordpress:这也是 wordpress 中的插件名称:
Additionally here is the shortcode within Elementor Pro:此外,这是 Elementor Pro 中的短代码:
Here is what I tried:这是我尝试过的:
Repositioning the script/html/css where html is first inside the function so that the css and script reads it after重新定位脚本/html/css,其中 html 首先位于 function 内,以便 css 和脚本在之后读取它
one stack question suggested to turn the script " into '. (single quotation). This does not change anything in my end一个堆栈问题建议将脚本“变成”。(单引号)。这对我来说没有任何改变
Put the <script> inside a function. Same issue with the dropdown above.将 <script> 放在 function 中。与上面的下拉列表相同的问题。
Need some advice on what to do.需要一些关于该做什么的建议。 Hope I explained my issue clearly.希望我清楚地解释了我的问题。 Feel free to comment if any elaboration is needed.如果需要任何详细说明,请随时发表评论。
There are a lot of mistakes in your code, I can't fix your whole code but I can give you a guide so that you can correct your code.你的代码中有很多错误,我无法修复你的整个代码,但我可以给你一个指导,以便你可以更正你的代码。
return
the content, if You use echo
it will create the problem. Shortcode 的回调函数应该只return
内容,如果你使用echo
就会产生问题。jquery.min.js
so you don't have to add another jquery. jquery.slim
also doesn't require for your code to work. WordPress 加载jquery.min.js
,因此您不必添加另一个jquery.slim
也不需要您的代码工作。global $wpdb;
line is unnecessary, You're not using the $wpdb
variable anywhere in your code.行是不必要的,您没有在代码中的任何地方使用$wpdb
变量。 if you'll use it in the future then keep it.如果您将来要使用它,请保留它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.