下拉菜單無法正常工作

我有一個下拉菜單，顯示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'是否有錯誤。 –

下拉菜單無法正常工作

回答

相關問題