Question

我通过stackoverflow扫描并了解它是否需要刷新ajax .load（）的下拉列表...但是不确定这是如何工作的，因为点击两次下拉或三次再次停止..：/

jquery

 <ul class="nav navbar-nav">
 <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> Smart Phones <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li ><a href="#" id="android">Android</a></li>
 <li><a href="#" id="ios">IOS</a></li>
 <li><a href="#" id="win">Windows</a></li>
 </ul>
 </li> 
 </ul>

HTML

' ak'

Answer 1

这是一个大约一年的问题，但我有类似的麻烦，可以弄明白。所以我会在几个小时的搜索后分享我学到的东西。一个重要的事实是在引导之前应该包含 jquery。订单很重要。 这是我测试的内容。

我的index.html文件是

Binary files Archive.zip and files.zip differ

请注意，jquery javascript和bootstrap css以及javascript都包含在head tagg中。正如我之前所说，订单非常重要。
头标记和load（）语句中包含的jQuery AJAX调用用于调用导航菜单nav_menu2.html。

我的nav_menu2.html是

<!DOCTYPE html>
<html>
<head>
    <!-- Latest jQuery Core Javascript -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <!-- Latest compiled and minified Bootstrp CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Latest compiled and minified Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- jQuery AJAX call -->
    <script>
            $(document).ready(function() {
                           $('#navigation').load('/includes/nav_menu2.html');
            });
    </script>    
</head>
<body>

    <div id="navigation"></div>

    Test is working!!!

</body>
</html>

最后，我把代码

    <!-- Navigation -->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">  
                <a class="navbar-brand" href="#">Homepage</a>
            </div>
            <ul class="nav navbar-nav">  
                <li class="active"><a href="index.html">Home</a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CLASS<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Physics</a></li>
                        <li><a href="#">Chemistry</a></li>
                        <li><a href="#">Calculus</a></li>
                        <li><a href="#">English</a></li>                                
                        <li><a href="#">Orchestra</a></li>
                        <li><a href="#">PE</a></li>
                    </ul>
                </li>                           
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">SPORTS<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Tennis</a></li>
                        <li><a href="#">Swimming</a></li>
                        <li><a href="#">Baseball</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.container-fluid -->
    </nav><!-- /.navbar -->

。我测试过，它有效。

ajax调用后，Bootstrap下拉列表不起作用（即使重新初始化后）

1 个答案: