Question

基本上我的网站一起使用Fullpage.js和Bootstrap，但问题是专为移动设备设计的菜单按钮不会崩溃。当我从页面中删除Fulpage.js的所有设置时，它工作正常！

这是我的site，因此您可以测试它并将网站最小化为sm，然后您会注意到导航栏按钮不会崩溃。

因此，如果您对此问题或解决此问题的任何解决方案有任何疑问，请告诉我......

这是我的index.php的完整代码：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="author" content="Alvaro Trigo Lopez" />
        <meta name="description" content="fullPage fixed header and footer." />
        <meta name="keywords"  content="fullpage,jquery,demo,screen,fixed, header,footer, absolute, positioned,css" />
        <meta name="Resource-type" content="Document" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Gooyanet</title>
        <link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
        <link href="examples.css" type="text/css" rel="stylesheet"/>
        <link href="style.css" type="text/css" rel="stylesheet"/>
        <link href="jquery.fullPage.css" type="text/css" rel="stylesheet"/>
        <link href="examples.css" type="text/css" rel="stylesheet"/>
        <link href="jquery.fullPage.css" type="text/css" rel="stylesheet"/>
        <style>
        h1{
            font-size: 5em;
            font-family: arial,helvetica;
            color: #fff;
            margin:0;
            padding:0;
        }
        .intro p{
            color: #fff;
        }
        .section{
            text-align:center;
        }
        #header, #footer{
            position:fixed;
            height: 50px;
            display:block;
            width: 100%;
            z-index:9;
            text-align:center;
            color: #f2f2f2;
            padding: 20px 0 0 0;
        }
        #header{
            top:0px;
        }
        #footer{
            bottom:0px;
        }
        #infoMenu {
            bottom: 80px;
        }
        #infoMenu li a {
            color: #fff;
            z-index: 999;
        }
        </style>
        <!--[if IE]>
            <script type="text/javascript">
                 var console = { log: function() {} };
            </script>
        <![endif]-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="vendors/jquery.slimscroll.min.js" type="text/javascript"></script>
        <script src="vendors/jquery.easings.min.js"></script>
        <script src="examples.js" type="text/javascript"></script>
        <script src="vendors/jquery.slimscroll.min.js" type="text/javascript"></script>
        <script src="jquery.fullPage.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script src="vendors/scrolloverflow.js" type="text/javascript"></script>
        <script src="jquery.fullPage.js" type="text/javascript"></script>
        <script src="examples.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#fullpage').fullpage({
                    anchors: ['firstPage', 'secondPage', '3rdPage'],
                    sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
                    css3: true
                });
            });
        </script>
    </head>
    <body>
        <div id="header">
            <nav class="navbar navbar-default navbar-fixed-top BKoodakBold" id="topMenu">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <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" href="http://www.gooyanet.com">Gooyanet</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li ><a href="mobile.php">دانلود اپلیکیشن &nbsp;<span class="glyphicon glyphicon-download-alt"></span></a></li>
                            <li><a href="guides.php">راهنمای سایت &nbsp;<span class="glyphicon glyphicon-oil"></span></a></li>
                            <li><a href="aboutus.php">درباره ما &nbsp;<span class="glyphicon glyphicon-equalizer"></span></a></li>
                            <li><a href="login.php">ورود به دنیای گویانت &nbsp;<span class="glyphicon glyphicon-user"></span></a></li>
                            <li><a href="signup.php">ثبت نام در گویانت &nbsp;<span class="glyphicon glyphicon-registration-mark"></span></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div id="footer">
            <footer class="footer">
                <div class="container">
                    <p class="text-muted">Designed & Developed By <a href="http://www.daygostar.com">Daygostar Inc</a></p>
                </div>
            </footer>
        </div>
        <div id="fullpage">
            <div class="section">
                <iframe src="Round.html" frameborder="0" scrolling="no" style="width:100%;height:100% !important;"></iframe>
            </div>
        </div>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

这是打印屏幕图片，你可以理解我在说什么按钮：

Answer 1

你的意思是它甚至打开了吗？

您的Javascript控制台出错：

bootstrap.min.js：6未捕获错误：Bootstrap的JavaScript需要jQuery 1.9.1或更高版本

为什么移动设备的Bootstrap导航菜单按钮不会崩溃

1 个答案: