Question

我的导航栏出现问题，因为当我看到折叠按钮并单击其中一个当我尝试折叠它时出现的选项时，它会卡住并且不会恢复正常，除非我刷新页面。

这是与页面一起使用的html

<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/Style.css">

</head>
<body>
    <div class="">
        <header>
            <nav class="navbar navbar-inverse" id="nav">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
                            <span class="sr-only">Menu</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="" class="navbar-brand">Ans Dashboard</a>
                    </div>
                    <div class="collapse navbar-collapse text-center" id="navbar-1">
                        <ul class="nav navbar-nav">
                            <li class="" data-target="customer_main"><a href=""><span class="glyphicon glyphicon-user"></span><?php echo " Customers";?></a></li>
                            <li class="" data-target="inventorypage"><a href=""><span class="glyphicon glyphicon-th-list"></span><?php echo " Inventory";?></a></li>
                            <li class="" data-target=""><a href="#"><span class="glyphicon glyphicon-signal"></span><?php echo " Stats";?></a></li>
                            <li class="" data-target=""><a href="#"><span class="glyphicon glyphicon-asterisk"></span><?php echo " Settings";?></a></li>
                        </ul>
                        <div class="navbar-right text-center">
                            <ul class="nav navbar-nav">
                                <form method="post" class="nav navbar-nav">
                                    <li><p class="navbar-text"><?php echo "Welcome"?><p></li>
                                    <li><button type="submit" name="logout" id="logout" class="btn btn-danger btn-sm navbar-btn"><span class="glyphicon glyphicon-off"></span><?php echo " Log out";?>
                                    <?php
                                        include("logout.php");
                                    ?>
                                    </button></li>
                                </form>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
    </div>
    <!-- end of navbar-->
    <div id="content">
         <!-- Js page loads here -->
    </div>

    <script src="../js/jquery-3.1.1.min.js"></script>
    <script src="../js/mainpage.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    </body>
</html>

这是点击导航栏区域后加载页面的javascript（mainpage.js）

$(document).ready(function()
{
var trigger = $('#navbar-1 ul li'), container = $('#content');

trigger.on('click', function(){

    var $this = $(this), target = $this.data('target');

    container.load(target + '.php');

    trigger.removeClass("active");
    $this.addClass("active");

    return false;

    });
});

编辑：已经解决了这个问题，它所加载的页面不得不对它们的结构方式产生一些问题。

Answer 1

我已更新您的代码，请查看下面附带的我的小提琴链接，

$(document).ready(function() {
  var trigger = $('#navbar-1 ul li'),
    container = $('#content');
  trigger.on('click', function() {
    var $this = $(this),
      target = $this.data('target');
    container.load(target + '.php');
    trigger.removeClass("active");
    $this.addClass("active");
    return false;
  });
});

<强> fiddle

感谢。

通过js

1 个答案: