0

我正在使用 bootstrap 和 joomla 3 构建模板(http://lucapadovani.com/tese-beta/)并且在 2 个响应式导航栏方面存在一些问题:当我单击切换按钮时,菜单根本不会打开。我猜joomla“bootstrap.framework”和其他js相关的东西之间可能存在某种冲突,但所有这些对我来说都是新的,所以我不确定如何解决这个问题。有什么帮助吗?谢谢。

索引.php

<?php
defined('_JEXEC') or die;

  // Add JavaScript Frameworks
  JHtml::_('bootstrap.framework');

  // Load optional Bootstrap bugfixes
  JHtmlBootstrap::loadCss($includeMaincss = true);

  // Check homepage
  $defaultMenu = JFactory::getApplication()->getMenu()->getDefault()->id;
  $currentMenu = JFactory::getApplication()->getMenu()->getActive()->id;

  if($defaultMenu == $currentMenu){ 
     $bodyId = 'id="home"'; 
     $homePage = true; 
  }else{
     $bodyId = ''; 
     $homePage = false; 
  }

  // Logo file or site title param
  if ($this->params->get('logoFile'))
  {
    $logo = '<img src="'. JURI::root() . $this->params->get('logoFile') .'" alt=" Tese"  />';
  }

?>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Include optional regions in the template -->
<?php
 $this->_scripts = array();
?>

<jdoc:include type="head" />

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
    <![endif]-->

<!-- Stylesheets listed below 
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />-->   
<!-- Bootstrap styling -->
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/custom.css" rel="stylesheet" media="screen">

<?php
  // Header color
  if ($this->params->get('headerColor'))
  {
  ?>

  <style type="text/css">
    header{
      background:<?php echo $this->params->get('headerColor');?>;  
    }
  </style>

  <?php
  }
?>

<?php
  // Top menu (active-item) color
  if ($this->params->get('topColor'))
  {
  ?>

  <style type="text/css">
    .topheader .navbar-inverse .nav .active>a,
    .topheader .navbar-inverse .nav .active>a:hover,
    .topheader .navbar-inverse .nav .active>a:focus {
      background-color:<?php echo $this->params->get('topColor');?>;
    }
  </style>

  <?php
  }
?>

<?php
  // Menu color
  if ($this->params->get('menuColor'))
  {
  ?>

  <style type="text/css">
    #mainnav.navbar-inverse .nav .active>a,
    #mainnav.navbar-inverse .nav .active>a,
    #mainnav.navbar-inverse .nav .active>a {
      background-color:<?php echo $this->params->get('menuColor');?>;
    }
  </style>

  <?php
  }
?> 


<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/respond.min.js"></script>
</head>

<body>
<div class="container all"><!--Page container-->

<!--===Top===-->
<div class="row topheader">
    <div class="col-sm-12">  
        <nav class="navbar navbar-inverse" role="navigation" id="topnav">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand visible-xs" href="#">Tese</a>
            </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <jdoc:include type="modules" name="topmenu" style="html5" />
                <ul class="nav navbar-nav navbar-right">
                    <li><jdoc:include type="modules" name="socialnetworks" style="html5" /></li>
                    <li><jdoc:include type="modules" name="search" style="html5" /></li>
                </ul>
            </div>
        </nav>
    </div>
</div>
<!--===/top===-->

<!--===Header===-->
<header class="row">
    <div class="col-sm-3 logo"><?php echo $logo;?></div>
    <div class="col-sm-7">
        <nav class="navbar navbar-inverse" role="navigation" id="mainnav">
        <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand visible-xs" href="#">Menu</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex2-collapse">
              <jdoc:include type="modules" name="menu" style="html5" />
            </div><!-- /.navbar-collapse -->
        </nav>  
    </div>
  <div class="col-sm-2">
      <jdoc:include type="modules" name="join" style="html5" />
    </div>
</header>
<!--===/header===-->


<!--===Home-only layout===-->
<?php if($homePage == true): ?>
    <div class="row">
        <div class="col-sm-12"><jdoc:include type="modules" name="banner" style="html5" /></div>
    </div>
    <div class="row" id="areas">
        <div class="col-sm-12"><jdoc:include type="modules" name="buttons" style="html5" /></div>
    </div>
    <div class="row" id="intro">
        <div class="col-sm-12"><jdoc:include type="modules" name="about" style="html5" /></div>
    </div>
    <div class="row" id="news">
        <div class="col-sm-12"><jdoc:include type="modules" name="content1" style="html5" /></div>
        <div class="col-sm-12"><jdoc:include type="component" /></div>
    </div>
    <div class="row" id="partners">
        <div class="col-sm-12"><jdoc:include type="modules" name="partners" style="html5" /></div>
    </div>
<? endif; ?> 
<!--===/home-only layout===-->

<!--===Page layout===-->
<?php if($homePage == false): ?>

    <div class="col-sm-3 pull-right">
        <jdoc:include type="modules" name="breadcrumb" style="html5" />
    </div>
  <!-- W/ module right: 2 columns layout -->
  <?php if ($this->countModules('right')): ?>
    <div class="row">
        <div class="col-sm-9" id="main">
          <jdoc:include type="modules" name="content1" style="html5" />
          <jdoc:include type="component" />
            <jdoc:include type="modules" name="content2" style="html5" />
        </div>
        <div class="col-sm-3" id="sidebar">
          <jdoc:include type="modules" name="right" style="html5" />
        </div>
    </div>
    <!-- Else: 1 column layout -->
    <?php else : ?>
    <div class="col-sm-9">
        <jdoc:include type="modules" name="content1" style="html5" />
        <jdoc:include type="component" />
        <jdoc:include type="modules" name="content2" style="html5" />
    </div>
    <? endif; ?>

<? endif; ?>
<!--===/page layout===-->

<!--===Footer===-->
<footer class="row">
  <div class="col-sm-9"><jdoc:include type="modules" name="footer1" style="html5" /></div>
  <div class="col-sm-3"><jdoc:include type="modules" name="footer2" style="html5" /></div>
</footer>
<!--===/footer===-->


</div><!--/page container-->

<!--<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js"></script>-->
</body>
</html>
4

1 回答 1

0

我浏览了你提供的链接。

有几个 Javascript 错误。你需要修复。

JS 错误:window.addEvent - addEvent 方法未定义。这里,window.addEvent 是 mootool Javascript 库方法。我查了一下,在你的页面中,我找不到 mootool 库的引用。

JS 错误 - autocompleter.js - “未捕获的 ReferenceError:未定义类”。这应该在您添加 mootools JS 链接后解决。

您可以在“media\system\js\mootools-core.js”中找到它。

因为,使用 Jquery 和 mootools 需要 jquery-noconflict.js。您还需要注意“jquery-noconflict.js”,您可以在“media\jui\js\jquery-noconflict.js”中找到它。

因此,请确保删除 Javascript 错误以实现您的功能。

于 2013-10-27T18:00:27.583 回答