Bootstrap 导航栏下拉菜单不工作

i86rm4rw  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(227)

我从 Bootstrap 创建了一个动态导航栏。菜单和子菜单是从MySQL数据库加载的。它以前工作,但现在下拉菜单不工作。添加datepicker Bootstrap 输入后。以下是我的代码:
这是一个很好的例子。

<?php 
include_once 'inc/config.php';
?>
<!DOCTYPE html>
<html lang="id">
<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="Author" content="Muhamad Firdaus Hidayat"/>
    <!-- Bower Components -->
    <link rel="stylesheet" href="bowercomponents/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bowercomponents/datepicker/bootstrap-datepicker3.css" />
    <script type="text/javascript" src="bowercomponents/datepicker/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="bowercomponents/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bowercomponents/jquery/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="bowercomponents/moment/min/moment.min.js"></script>

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

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <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="#">Muhamad Firdaus Hidayat</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <?php

                mysql_connect("localhost","root","");
                mysql_select_db("firdaus");
                    $menu = mysql_query("SELECT * FROM menu ORDER BY menu_id ASC");
                    while($dataMenu = mysql_fetch_assoc($menu)){
                        $menu_id = $dataMenu['menu_id'];
                        $submenu = mysql_query("SELECT * FROM submenu WHERE menu_id='$menu_id' ORDER BY submenu_id ASC");
                        if(mysql_num_rows($submenu) == 0){
                            echo '<li><a href="'.$dataMenu['menu_link'].'">'.$dataMenu['menu'].'</a></li>';

                        }else{
                            echo '
                            <li class="dropdown">
                                <a href="'.$dataMenu['menu_link'].'" class="dropdown-toggle" data-toggle="dropdown">'.$dataMenu['menu'].' <b class="caret"></b></a>
                                <ul class="dropdown-menu">';
                                while($dataSubmenu = mysql_fetch_assoc($submenu)){
                                    echo '<li><a href="'.$dataSubmenu['submenu_link'].'">'.$dataSubmenu['submenu'].'</a></li>';

                                }
                            echo '
                                </ul>
                            </li>
                            ';
                        }
                    }
                    ?>
                </ul>
            </div>
        </div>
    </nav>
    </body>
</html>

这就是index1.php

<?php
session_start();
include_once 'navbar.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login System</title>

    <style>
        body {
            background-color:#eee;
        }
    </style>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <div class="container">
        <div class="col-md-3"></div>
            <div class="col-md-5">
            <form action="inputordersample" method="post" accept-charset="utf-8">
            <table class="table table-bordered">
                <tr><td>Order number</td>
                <td>  
                    <div class="input-group">
                    <input type="text" name="no.order" required="" placeholder="Order number" autofocus="" class="form-control">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span></div>
                </td>  
                </tr>
                <tr><td>Sample Type</td><td>
                        <select class="form-control" id="sel1">
                            <option>Sales Sample</option>
                            <option>Proto Sample</option>
                            <option>Konfirmasi</option>
                            <option>Revisi</option>
                        </select>

                    <span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
                </td>
                </tr>
                <tr><td>D1</td><td>
                    <div class="input-group">
                    <input type="text" name="sampled1" placeholder="D1" required="" class="form-control">
                    <span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
                </td>
                </tr>

                <tr><td>Deadline</td><td>
                    <div class="input-group date" id="datetimepicker1">
                    <input type='text' name="tanggal" placeholder="Deadline" required="" class="form-control" id="tanggal"/>
                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span></div>
                                <script type="text/javascript">
                                    $(document).ready(function () {
                                        $('#tanggal').datepicker({
                                        format: "dd-mm-yyyy",
                                        autoclose:true
                                        }).on('changeDate', function (ev) {
                                    $("#berubah").html('<font color="red"><b>'+$('#tanggal').val()+'</b></font>');
                                    });
                                    });
                                </script>
                </td>
                </tr>

                <tr><td>Article</td><td>
                    <div class="input-group">
                    <input type="text" name="Article" placeholder="Article" required="" class="form-control">
                    <span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
                </td>
                </tr>
                <tr><td>Size</td><td>
                    <div class="input-group">
                    <input type="text" name="size" placeholder="Size" required="" class="form-control">
                    <span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
                </td>
                </tr>
                <tr><td>Color</td><td>
                    <div class="input-group">
                    <input type="text" name="color" placeholder="Color" required="" class="form-control">
                    <span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
                </td>
                </tr>
                <tr><td>Outsole</td><td>
                    <div class="input-group">
                    <input type="text" name="outsole" placeholder="Outsole" required="" class="form-control">
                    <span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
                </td>
                </tr>
                <tr><td>Sum</td><td>
                    <div class="input-group">
                    <input type="text" name="sum" placeholder="Sum" required="" class="form-control">
                    <span class="input-group-addon"><i class="fa fa-keyboard-o"></i></span></div>
                </td>
                </tr>

                <tr><td>Det</td><td>
                <textarea class="form-control" rows="5" id="Detail"></textarea>
                </td>
                </tr>

              <tr><td></td><td></td></tr>
              <tr><td></td><td><input type="submit" name="submit" value="Save" class="btn btn-danger"></td></tr>
            </table>   
            </form>
            </div>
        <div class="col-md-3"></div>
    </div>

</body>
</html>
y3bcpkx1

y3bcpkx11#

我已经修复了这个问题,这是因为jquery链接在navbar中断开,必须指向index.php而不是navbar.php

相关问题