下拉菜单无法正常工作

我有一个下拉菜单，显示2个链接，一个到我的图片库和其他视频库，但当我在除了我的index.ctp之外的视图中，下拉菜单根本没有打开。如果我从“源代码”分发中放置dropdown.js并将其包含在布局中，则下拉列表在index.ctp中不起作用，但它们适用于其他视图。同时，在谷歌上搜索时，我发现这个thread这让我可以在所有视图中使用它，但菜单只打开一次，这有什么问题？下拉菜单无法正常工作

我使用Twitter的引导3.1.1和CakePHP 2.4.4

布局

 <li class="dropdown"> 
      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Serviços <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><?php echo $this->Html->link('Música', array('controller'=>'services', 'action'=>'Musica'))?></li> 
       <li><?php echo $this->Html->link('Animação Temática', array('controller'=>'services', 'action'=>'AnimacaoTematica'))?></li> 
       <li><?php echo $this->Html->link('Promoção', array('controller'=>'services', 'action'=>'Promocao'))?></li> 
       <li><?php echo $this->Html->link('Staff', array('controller'=>'services', 'action'=>'Staff'))?></li> 
       <li><?php echo $this->Html->link('Aluguer', array('controller'=>'services', 'action'=>'Aluguer'))?></li> 
      </ul> 
     </li>

布局头部

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title><?php echo $title_for_layout;//titulo dinamico da página?></title> 
    <?php 
    echo $this->Html->meta('icon'); 
    //echo $this->Html->css('cake.generic'); 
    echo $this->fetch('meta'); 
    echo $this->fetch('css'); 

    echo $this->Html->script('modernizr-2.6.2-respond-1.1.0.min'); 
    echo $this->fetch('script'); 
    echo $this->element('fancybox_links'); 
    echo $this->Html->script('jquery-1.11.0'); 
    echo $this->Html->script('main'); 
    echo $this->element('fancybox_links'); 
    echo $this->Html->css('http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5'); 
    echo $this->Html->script('http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5');   
    echo $this->Html->css('bootstrap-theme.min'); 
    echo $this->Html->css('main'); 
    echo $this->Html->css('bootstrap.min'); 
    echo $this->Html->css('bootstrap'); 
    echo $this->Html->script('bootstrap'); 
    echo $this->Html->script('bootstrap.min'); 
    echo $this->Html->script('dropdown'); 
    ?> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <style> 
     body { 
      padding-top: 50px; 
      padding-bottom: 20px; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function(){ 
      $(".dropdown-toggle").click(function(){ 
       $(this).dropdown('toggle'); 
      }); 
     });  
    </script> 
    <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"> 
      $(document).ready(function() { 
       $(".fancybox3").fancybox(e){ 
        openEffect : 'none', 
        closeEffect : 'none', 
        helpers : { 
         title : { 
          type : 'float' 
         } 
        } 
        e.preventDefault; 
       }); 
      }); 
    </script> 
    <!--<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>--> 
</head>

来源

2014-04-01 SunT

你还有什么在home.ctp？ –

我更正了视图名称，是index.ctp。在这个观点上，我有一个幻灯片，我试图使它工作，并简单的文字。 – SunT

请修复js错误，如果它有任何 –

在清理了js文件夹并从here，然后this插件重新安装了fancybox后，下拉菜单开始工作。

Leyout头

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title><?php echo $title_for_layout;//titulo dinamico da página?></title> 
    <?php 
    echo $this->Html->meta('icon'); 
    //echo $this->Html->css('cake.generic'); 
    echo $this->fetch('meta'); 
    echo $this->fetch('css'); 
    echo $this->Html->script('modernizr-2.6.2-respond-1.1.0.min'); 
    echo $this->fetch('script'); 
    echo $this->Html->script('jquery-1.11.0.min'); 
    echo $this->Html->script('main'); 
    echo $this->Html->css('main'); 

    echo $this->Html->css('bootstrap-theme.min'); 
    echo $this->Html->css('bootstrap.min'); 
    echo $this->Html->css('bootstrap'); 

    echo $this->Html->script('bootstrap.min'); 
    echo $this->Html->script('bootstrap'); 
    echo $this->Html->script('dropdown'); 
    echo $this->Html->script('collapse'); 
    ?> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <style> 
     body { 
      padding-top: 50px; 
      padding-bottom: 20px; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function(){ 
      $(".dropdown-toggle").click(function(){ 
       $(this).dropdown('toggle'); 
      }); 
     });  
    </script> 
    <!--<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"> 
      $(document).ready(function() { 
       $(".fancybox3").fancybox(e){ 
        openEffect : 'none', 
        closeEffect : 'none', 
        helpers : { 
         title : { 
          type : 'float' 
         } 
        } 
        e.preventDefault; 
       }); 
      }); 
    </script> --> 
    </head>

来源

2014-04-03 09:32:30 SunT

我想你错过加载bootstrap和jquery在其他页面上。

您需要在公用文件或标题部分包含bootstrap和jquery。如果您使用其他framework/library，也请检查confliction。

来源

2014-04-01 11:00:15

我有一个加载'jquery'的问题，但只涉及fancybox。包括另一个'jquery'和'bootstrap'。 – SunT

全部包含在布局标题中，它都在那里。 – SunT

为什么添加'bootstrap'两次？你包括'bootstrap'和'bootstrap.min'两者。同时检查'console'是否有错误。 –

下拉菜单无法正常工作

回答

相关问题