Question

我已经尝试过我所知道的一切，但我找不到问题所在。我正在使用Laravel 4和fullpage js，因为它与Bootstrap 3的内容分离属性很好。一切正常，直到我尝试将google map iframe嵌入到about部分。当我这样做时，菜单链接停止运行，但是当我删除iframe时......一切都很糟糕。

我正在使用刀片模板系统，所以我会在组织后发布代码。

main.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>SPA | @yield('title')</title>

    <!-- animate.css Style Sheet -->
    {{ HTML::style('assets/css/animate.css') }}

    {{ HTML::style('assets/css/bootstrap.min.css') }}
    {{ HTML::style('assets/css/style.css') }}

    {{ HTML::style('assets/js/fullPage/jquery.fullPage.css') }}

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <!-- Load the navigation bar -->
    @include('navigation')
    <div class="fullpage">

        <!-- Load the Header section -->
        @include('sections.header')

        <!-- Load the About section -->
        @include('sections.about')

        <!-- load the Menu section -->
        @include('sections.menu')

        <!-- load the Contact section -->
        @include('sections.contact')
    </div>
</body>
<!-- Load jQuery & bootstrap js core files first -->
{{ HTML::script('assets/js/jquery.min.js') }}
{{ HTML::script('assets/js/bootstrap.min.js') }}

<!-- Load fullPagejs and it's supplied components -->
{{ HTML::script('assets/js/fullPage/vendors/jquery.easings.min.js') }}
{{ HTML::script('assets/js/fullPage/vendors/jquery.slimscroll.min.js') }}
{{ HTML::script('assets/js/fullPage/jquery.fullPage.min.js') }}

<script>
    $(document).ready(function(e) {

    $('.fullpage').fullpage({
        css3: true,
        anchors: ['home', 'about', 'menu', 'contact'],
        menu: '#main-menu',
        scrollOverflow:true,
        resize : false,
        paddingTop: '60px',

        afterRender: function () {
            //Start the whole shabang when DOM and APIs are ready by calling initialize()
            initialize();
        }
    });
});
</script>
</html>

about.blade.php

<div class="section bbq-about" id="bbq-about">
    <div class="col-12">
        <div class="row">
            <div class="well">
                <div class="page-header">
                    <h1>The Best Hickory Smoked BBQ Around! <small>Your Taste Buds Will Thank You</small></h1>
                    <p class="lead">Some solid leading copy will help get your users engaged.</p>
                    <a class="btn btn-large btn-primary" href="#contact">Contact Us Now</a>
                    <a class="btn btn-large btn-link" href="#contact">Do something else</a>
                </div><!-- ./page-header -->
            </div><!-- ./well -->
        </div>
    </div>
    <div class="col-sm-6">
        <h3>Stuff</h3>
        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#map" data-toggle="tab">Location</a></li>
                <li><a href="#story" data-toggle="tab">Our Story</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="bbq-map">
                    <h4><span class="glyphicon glyphicon-map-marker"></span> Our Location <small>Right Beside The Silver Dollar</small></h4>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3263.894014442773!2d-81.6058718!3d35.1093573!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88571b5799c9a41f%3A0xab1a38f8b5d56ef4!2s1425+Wilcox+Ave%2C+Gaffney%2C+SC+29341!5e0!3m2!1sen!2sus!4v1423796759172" width="100%" height="200" frameborder="0" style="border:0"></iframe>
                </div>
                <div class="tab-pane story" id="story">
                    <h4> The Owners<small> Jeff And Tom</small></h4>
                    {{ HTML::image('http://placehold.it/350x150', 'The Owners', array('class' => 'thumbnail pull-left')) }}
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consequatur consectetur illo veritatis deserunt dolores quos ab possimus sint debitis, repudiandae perspiciatis, unde laborum qui, sequi necessitatibus cum nihil consequuntur.</p>
                </div>
            </div>
        </div><!-- ./tabs -->
    </div><!-- ./left section -->
    <div class="col-sm-6">
        <h3>More Stuff</h3>
    </div>
    <!-- ./right section -->
</div>

请提供任何可以指明我正确方向的协助。

嵌入式Google Map干扰整页JS菜单

0 个答案: