Question

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

我正在使用twitter bootstrap 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>

Answer 1

我认为您错过了在其他网页上加载bootstrap和jquery。

您需要在公共文件或标题部分中加入bootstrap和jquery。

如果您使用了其他confliction，请检查framework/library。

Answer 2

在清理了js文件夹并重新安装了来自here，然后this插件的fancybox之后，下拉菜单就开始运行了。

Leyout Head

 <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>

下拉菜单无法正常工作

2 个答案: