Question

我在我的网页上使用Bootstrap 3.2。第一次加载页面时，我的下拉菜单会打开。但是当我点击导航栏上的任何其他菜单项时，下拉列表在此之后不会展开。点击其他菜单项，如＆＃34; Home＆＃34;或＆＃34;关于我们＆＃34;另一个HTML页面被加载到＆＃34; LinkToDisplay＆＃34; Index.html上的div。 JavaScript函数用于单击事件处理。顶部菜单栏在所有页面上都可见。我还在stackoverflow.com上提到了关于bootstrap下拉菜单问题的先前问题。

这是我的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Wel-Come To City Of Peoria </title>
    <meta name="description" content="Peoria restaurants">

     <!-- Latest compiled and minified js and CSS -->

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

     <!-- Optional theme -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">



</head>
<body>
    <!--Top navigation bar starts-->
        <div class="navbar navbar-default navbar-fixed-top ">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div> 

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a data-toggle="collapse" data-target=".nav-collapse" href="#"   id="btnHome" >Home</a></li>
                    <li><a href="#" id="btnAlphabetBar">A-Z</a></li>

                    <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cuisine<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Asian</a></li>
                                    <li><a href="#">American</a></li>
                                    <li><a href="#">Chinese</a></li>
                                </ul>
                    </li>

                    <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Location<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Willow Knolls</a></li>
                                    <li><a href="#">East Peoria</a></li>
                                    <li><a href="#">Peoria Heights</a></li>
                                </ul>
                    </li>

                    <li><a href="#" id="btnAboutUs">About US</a></li>
                    <li><a href="#" id="btnOurMission">Our Mission</a></li>
                    <li><a href ="#" id="btnContactUs">Contact Us</a></li>
                </ul>
            </div>              

        </div>
    </div>

        <!--Top navigation bar ends-->

<!-- Div to display home, about us, contact us, Mission and any link click information-->

    <div id="LinkToDisplay"> </div>

    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script type="text/javascript" src="myscript.js"></script>      
</body>

</html>

这是我的Myscript.js

    //Display Home page in  a div on index.html      
    $(document).ready(function(){
       $('#btnHome').click(function () { 
       $('#LinkToDisplay').load("Home.html"); 

    });

//Display About Us page in  a div on index.html
$('#btnAboutUs').click(function () { 
    $('#LinkToDisplay').load("AboutUs.html");
    });

//Display Contact Us page in  a div on index.html
$('#btnContactUs').click(function () { 
    $('#LinkToDisplay').load("ContactUs.html");
    });

//Display Aplhabet bar page in  a div on index.html
$('#btnAlphabetBar').click(function () { 
    $('#LinkToDisplay').load("AlphabetBar.html");
    });

//Display Our Mission page in  a div on index.html
$('#btnOurMission').click(function () { 
    $('#LinkToDisplay').load("OurMission.html");
    }); 

//Start To hide menu bar when a menu item is clicked
     jQuery(".nav a, .navbar-header a").click(function(event) {
                // check if window is small enough so dropdown is created
               jQuery(".navbar-collapse").removeClass("in").addClass("collapse");
        });
//End of To hide menu bar when a menu item is clicked   



});

单击导航栏上的任何其他菜单后，Bootstrap下拉菜单不起作用

0 个答案: