Question

这是导航栏帮助导航栏在移动模式下不打开请帮帮我导航栏显示下拉按钮但在移动模式下没有任何反应请帮助

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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.php">Theatre</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <?php if (isset($_SESSION['user'])) { ?> 

                <ul class="nav navbar-nav navbar-right">
                    <li class="navbar-right"><a href="./logout.php" class="btn btn-danger" style="color:whitesmoke;">logout</a></li>
                </ul>
                <ul class="nav navbar-nav">
                    <li <?= echoActiveClassIfRequestMatches("index") ?>>
                        <a href="index.php">Home</a></li>
                    <li <?= echoActiveClassIfRequestMatches("productions") ?>>
                        <a href="productions.php">Productions</a></li>    
                </ul>

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>


                <?php
            } else {
                ?>
                <form class="navbar-form navbar-right" action="index.php" method="post">
                    <div class="form-group">
                        <input type="text" placeholder="Email" name ="email" class="form-control">
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="Password" name="password" class="form-control">
                    </div>
                    <button type="submit" name="login" class="btn btn-success">Sign in</button>
                    <a href="./register.php" class="btn btn-warning">Register</a>
                </form>
            <?php }
            ?> 
        </div><!--/.navbar-collapse -->
    </div>
</nav>

Answer 1

你应该使用

 one <ul> and many <li> for your navigation (not many <ul> and <li>

Answer 2

您可以通过在按钮上添加简单的点击功能来解决此问题

function navbarshow(){ 
    var x = document.getElementById('collapse-navbar');
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
 }

并在按钮中调用该功能 onclick="navbarshow()"。

导航栏崩溃无法正常工作

2 个答案: