引导下拉菜单仅适用于主页（Joomla 3.0）答案

【问题标题】：Bootstrap dropdown menus only working on homepage (Joomla 3.0)引导下拉菜单仅适用于主页（Joomla 3.0）
【发布时间】：2013-07-04 17:39:35
【问题描述】：

我的自定义 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>

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

我希望有人对可能导致问题的原因有所了解。

【问题讨论】：

标签： javascript twitter-bootstrap drop-down-menu menu joomla3.0

【解决方案1】：

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

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

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

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

将“显示子菜单项”设置为是

保存更改

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

【讨论】：

【解决方案2】：

好的，对于初学者来说，不要将顶级链接设置为外部 URL，请像往常一样设置它们。如果您使用外部 URL，它会破坏站点地图等，并且任何面包屑样式都无法正常工作。而是更新您的 javascript 以删除 href 并用“#”替换它们。我附上了下面的javascript，它比你的要多一点

jQuery(document).ready(function(){

        // dropdown

        jQuery('.parent').addClass('dropdown');
        jQuery('.parent > a').addClass('dropdown-toggle');
        jQuery('.parent > a').attr('data-toggle', 'dropdown');
        jQuery('.nav > .parent > a').attr('href','#');
        jQuery('.parent > a').append('<span class="caret"></span>');
        jQuery('.parent > ul').addClass('dropdown-menu');
        jQuery('.nav-child .parent').removeClass('dropdown');
        jQuery('.nav-child .parent').addClass('dropdown-submenu');
        jQuery('.dropdown-submenu > a').removeAttr('class');
        jQuery('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown');
        jQuery('.dropdown-submenu > a > span').remove();
    });

这应该有效地修复您的菜单，如上所述，您还需要确保所有子菜单在页面加载时呈现，即它们是可见的。

此外，您可能需要考虑将您的 javascript 移动到位于 /template/$yourtemplate/js 的单独 js 文件中，然后将其作为来自 index.php 模板文件的负载调用，例如

$doc->addScript('templates/' . $this->template . '/js/template.js', 'text/javascript');

这是对服务器的另一个调用，因此它确实会稍微增加服务器压力，但它会将所有额外的 js “位”保存在一个地方（以及它们应该在的标题中）

此答案基于将 Joomla 3.2 与 bootstrap 2.3.1 和 Jquery 1.9.1 一起使用（此版本的 Joomla 均默认使用）

【讨论】：