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后端，转到模块管理器

找到您希望子菜单下拉的菜单

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

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

保存更改

我建议您在启用子菜单删除代码之前检查要显示此子菜单的所有页面中的子菜单显示。然后，添加javascript代码以实现引导下拉效果。

go to module manager

from module configuration, go to options tab

set show sub-menu items setting to yes

Answer 2

好的初学者不要将顶级链接设置为外部URL，请按照正常情况设置它们。如果您使用外部URL，它会破坏SITEMAP等，任何面包屑样式都无法正常工作。而是更新您的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）

Bootstrap下拉菜单仅适用于主页（Joomla 3.0）

2 个答案: