0

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

我检查了生成的代码，似乎我的 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>

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

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

4

2 回答 2

1

好的，对于初学者来说，不要将顶级链接设置为外部 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 均默认使用）

于 2013-11-21T01:44:07.363 回答
1

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

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

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

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

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

保存更改

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

转到模块管理器

从模块配置，转到选项选项卡

将显示子菜单项设置为是

于 2013-07-24T21:28:31.823 回答