HTML 手机下拉不一致

标签 html css mobile drop-down-menu

所以我有代码来创建一个下拉菜单，用于我的针对移动用户的网站。然而，它在一个页面上有效，但在另一个页面上无效。

还有哪些其他代码会干扰此问题的发生？

它在这里工作:

  <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="#page-top">Fortune Filly</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="#portfolio">Memberships</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </li>
                    <li class="page-scroll">
                        <a href="loginTemplate.php">Login</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

但不是这里: 

<nav class="navbar navbar-default navbar-fixed-top">

        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="index.html">Fortune Filly </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="index.html">Home</a>
                    </li>
                    <li class="page-scroll">
                        <a href="accountDetails.php">Account Details</a>
                    </li>
                    <li class="page-scroll">
                        <a href="logout.php">Logout</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
</nav>

我将在它不工作的页面上添加它我收到错误:session_start() 无法发送 session 缓存限制器 - header 已发送

这是该页面的其余代码，该代码不起作用:

<?php
include 'connect.php';
session_start();
ob_start();
if(!isset($_SESSION['username']))
{
    header("location:http://www.fortunefilly.com/loginTemplate.php");
}
else
{
    $username =$_SESSION['username'];
    $check = $mysqli->query("SELECT id FROM users WHERE username = '$username'");
    $row = $check->fetch_assoc();
    $id = $row['id'];
}
?>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Fortune Filly</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/freelancer.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body id="page-top" class="index">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top">

            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <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="index.html">Fortune Filly </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden">
                            <a href="#page-top"></a>
                        </li>
                        <li>
                            <a href="index.html">Home</a>

                        <li>
                            <a href="accountDetails.php">Account Details</a>
                        </li>
                        <li>
                            <a href="logout.php">Logout</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
    </nav>

<section class="success" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <br>
                    <h2>Welcome <?php echo $username;?></h2>
                    <hr class="star-light">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p>To gain access to the members section and receive daily horse racing tips from our professionals <a href='userPage.php'>Click here</a></p>   

                    <?php
                    $check = $mysqli->query("SELECT is_member FROM users WHERE username = '$username'");
                    $row = $check->fetch_assoc();
                    $isMember = $row['is_member'];
                    if ($isMember == 0){
                    echo'<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="CTKLZLJZBA4P4">
<table>
<tr><td><input type="hidden" name="on0" value=""></td></tr><tr><td><select name="os0">
    <option value="Weekly">Weekly : £5.00 GBP - weekly</option>
    <option value="Monthly">Monthly : £15.00 GBP - monthly</option>
    <option value="Yearly">Yearly : £60.00 GBP - yearly</option>
</select> </td></tr>
</table>
<input type="hidden" name="custom" value="$id">
<input type="hidden" name="currency_code" value="GBP">
<input type="image" src="https://www.sandbox.paypal.com/en_US/GB/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.sandbox.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>


                    ';
                    // echo '<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
                    // <input type="hidden" name="cmd" value="_s-xclick">
                    // <input type="hidden" name="custom" value="$id">
                    // <input type="hidden" name="hosted_button_id" value="H4K679J6Y5T7C">
                    // <input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
                    // <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
                    // </form>';
                    }
                    ?>


                </div>

            </div>
        </div>
    </section>
</body>

</html>

最佳答案

好的，根据您发布的最新代码，我相信这是您的问题。在登录页面，页面底部有一点jQuery:

$(document).ready(function() {
    LoginModalController.initialize();
});

但是，jQuery 似乎要么没有正确加载，要么在函数被触发后加载，因为我得到:

Uncaught ReferenceError: $ is not defined

看起来您还没有在登录页面上加载 bootstrap.min.js，我相信这是导航下拉菜单所必需的(虽然我从未使用过，但并不完全确定Bootstrap 的那个特性)。

更新: OP 在页眉和页脚中调用 login.js 文件，在页眉中调用的文件在之前触发时导致引用错误jQuery 已加载。

关于HTML 手机下拉不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33242088/

上一篇：html - CSS div 不填充顶部和左侧

下一篇：html - 如何阻止 div 压低其他 div？

相关文章：

html - CSS :hover not working for link containing paragraph

css - 有没有办法在渲染页面之前下载 HTML5 页面中的字体？

ios - Swift 3 使用 NSAttributedString 渲染 textview 但想要更改默认字体

mobile - VideoJS 4 native 控件现在默认在移动设备上？

mobile - Adobe Air Mobile 初创公司

javascript - 需要帮助为 firefox 附加组件创建多级上下文菜单

html - 创建水平滚动和环绕元素

jquery - 第一次点击 selectpicker 的最后选择的选项将不起作用

javascript - 垂直居中部分 svg 内容

css - 隐藏水平滚动条但仍可滚动

©2024 IT工具网  联系我们