javascript - Bootstrap 下拉菜单仅适用于主页(Joomla 3.0)

Question

我的自定义 Joomla 3.0 模板使用 Bootstrap 下拉菜单时发生了一件奇怪的事情。它在我的本地主机和远程主机站点的主页上运行得非常好。但是，当我单击任何链接时，下拉功能将停止工作，并且所有子菜单项都会变成可见的难看的列表!

我检查了生成的代码，似乎我的 javascript 仅在主页上正确处理，但在其他地方似乎完全被忽略。我在我的index.php文档底部添加了以下代码来插入类，因为它是一个Joomla站点并且不是手工编码的(我可以处理!!):

<script type="text/javascript">
  (function($){   
    $(document).ready(function(){
      // dropdown
      $('.parent').addClass('dropdown');
      $('.parent > a').addClass('dropdown-toggle');
      $('.parent > a').attr('data-toggle', 'dropdown');
      $('.parent > a').append(' ', '<span class="caret"></span>');
      $('.parent > ul').addClass('dropdown-menu');
    });
  })(jQuery);
</script>

顶级菜单项是由指向 # 字符的外部链接触发的，正如我所说，该脚本是在本地主机上实现的，奇怪的是，在远程托管的主页上实现，但不在任何其他页面上实现，这使得对我来说完全没有意义。

我希望有人对可能导致问题的原因有一些想法。

Answer 1

您需要将顶部菜单模块的子菜单配置为始终显示。

从 Joomla 3 后端，转到模块管理器

找到您想要下拉子菜单的菜单

在此菜单模块配置中，转到选项选项卡

将“显示子菜单项”设置配置为"is"

保存更改

我建议您在启用子菜单下拉代码之前检查您希望显示该子菜单的所有页面中显示的子菜单。然后，添加javascript代码来实现bootstrap下拉效果。