Wordpress 手风琴菜单无法正常工作答案

【问题标题】：Wordpress accordion menu dont work properlyWordpress 手风琴菜单无法正常工作
【发布时间】：2021-06-15 08:34:10
【问题描述】：

我有以下页面https://german-academic-institute.eu/faqs/ 带有 WPBakery 插件，该插件在页面中间有用于常见问题的手风琴菜单。所有这些菜单都是关闭的，但由于某种原因，它们不是，当我单击它们时，关闭/打开它们的选项不起作用。我还测试了其他可折叠菜单，并且发生了同样的事情。所以我认为它必须与 Jquery 做一些事情，但无法弄清楚。

我可以使用任何帮助

谢谢。

【问题讨论】：

head 中同步脚本的顺序很重要。您的脚本jQuery( "#datepicker" ).datepicker() 在浏览器加载之前引用了 jQuery。顺便说一句，您不止一次加载 jQuery，大多数情况下只加载一次库就足够了。
此外，$ 可以是 jQuery 的别名。请阅读this question 和接受的答案。这也将对您有所帮助：Protecting the $ Alias and Adding Scope。我坚信您不需要 $ 别名。
请在描述和代码行中指定您的错误。如果您需要更新 jquery，我被评论了。记得更新你的问题，并在这里描述你的问题！

标签： javascript jquery accordion jquery-ui-accordion

【解决方案1】：

开发工具和浏览器控制台是您的朋友。您可以通过右键单击页面并从显示的菜单中选择 Inspect/Inspect Element 来访问它（实际文本因浏览器而异）。在开发工具中，如果您单击控制台选项卡，您将在浏览器中看到错误并可以尝试使用脚本。请看这张图片：

您猜对了，问题出在jQuery，因为您的页面尝试使用该变量名访问 jQuery，但是，在您的情况下，jQuery 被称为 $。

快速解决方法是在尝试使用变量之前创建它：

var jQuery = $;

或在所有出现的情况下将jQuery 替换为$。请注意解决方案的思考过程：

我查看了错误，发现变量丢失了
我检查了变量是否被称为$ 而不是jQuery
根据所学知识，我制定了一个计划，并写了一个答复给你

【讨论】：

感谢您的回复。我确实按照指示通过 CHrome 开发工具进行了检查，我看到的唯一错误是这部分代码： jQuery( function() { jQuery( "#datepicker" ).datepicker(); } );但没有其他任何显示为错误。我确实添加了你的 var jQeurry =$;在标题部分内部，但手风琴菜单仍然没有像以前一样打开或关闭。我到底需要在哪里添加您的代码部分？谢谢。
@BorisZegarac 您在评论中显示的代码中有错字。您需要确保在崩溃的代码（尤其是与日期选择器相关的代码）之前执行var jQuery = $;。如果您添加此行并且问题仍然存在，那么您添加的行在尝试使用之前未执行。你能检测到崩溃的 jQuery 相关代码在哪里吗？
感谢您的回答。我删除了代码的 datepicker 部分，甚至禁用了该插件，但没有，此后手风琴仍然无法工作。不确定是否有其他东西阻止它。
@BorisZegarac 根据我在访问您的页面时的发现，该网站试图使用 jQuery 而不是 $。因此，您显然有一些脚本试图通过不正确的名称使用 jQuery。我会在整个项目中搜索 jQuery 这个词，如果你想看看它在哪里被使用的话。在调查结果中，您可能会遇到问题。另外，如果您的页面有较大的更改，请在评论部分告诉我，我会再次访问该页面。

【解决方案2】：

datepicker 似乎阻止了手风琴功能的使用。

This is the datepicker "script" in the <head> of the page markup. Searching the page, this is the only instance of datepicker in the markup and as the console shows, blocks other code - such as the accordion - from running

Console showing the error. Since the datepicker is basically at the top of the page, it will prevent JavaScript that is below it from executing

我什至找不到与手风琴功能相关的任何内容（就其中包含手风琴功能的实际脚本而言），但在控制台中使用了一段时间后，我想出了这个丑陋的 jQuery - jQuery(".vc_tta-panel-heading a").click(function(e){e.preventDefault; jQuery(e.target).parents('.vc_tta-panel').children('.vc_tta-panel-body').toggle()})。这是插件应该做的。不完全是一个答案，但你可能会更好地联系插件作者寻求建议。

【讨论】：

感谢您的回答。我删除了代码的 datepicker 部分，甚至禁用了该插件，但没有，此后手风琴仍然无法工作。不确定是否有其他东西阻止它。

【解决方案3】：

继续。

<!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>  --> 
you can update!

<script type="text/javacript">
//replace

  jQuery( function() {
    jQuery( "#datepicker" ).datepicker();
  });

   $(document).ready(function(){
       //include you datepicker function.

   })
  </script>
<!-- Nice once -->

 > note : is good practice include in section 

  > styles
  > html sections
  > tags lines javascript and includes

【讨论】：