JQuery .load中的Bootstrap Dropdown无法正常工作

时间:2015-07-07 17:47:26

标签: javascript jquery html css twitter-bootstrap

我正在使用bootstrap在github页面上创建一个网站,但下拉列表似乎没有在导航栏上工作(有时可以工作,有时不工作)。我正在使用$("#nav").load("url"); 加载导航栏,以便我可以更改它并将更改应用于许多页面。如果我直接去那里,我正在加载的页面下拉工作。该网页为http://scratchos.github.io/index2.html

/resorces/navbar.html

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

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!--bootstrap-->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <!--main.css, i do not know if it is used on the page, i think not-->
        <link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
        <!--meta-->
        <meta charset="utf-8">
        <!--get url parameters for adding classes to set items to make it applicable to all pages-->
        <script>
            function getParameter(theParameter) { 
                var params = window.location.search.substr(1).split('&');
                for (var i = 0; i < params.length; i++) {
                    var p=params[i].split('=');
                    if (p[0] == theParameter) {
                        return decodeURIComponent(p[1]);
                    }
                }
                return false;
            }
        </script>
        <!--bootstrap dropdown code-->
        <script>
            $(document).ready = function () {
                $('.dropdown-toggle').dropdown();
            };
        </script>
    </head>

    <body>
        <!--bootstrap nav bar-->
        <div class="nav nav-tabs">
            <li id="home"><a href="#">Home</a></li>
            <li id="projects"><a href="#">My Projects</a></li>
            <li id="hfb">
                <!--JQuery-->
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Hungry-For-Blocks<span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li id="hfb-home"><a href="//scratchos.github.io/Hungry-For-Blocks/">Home</a></li>
                        <li id="hfb-about"><a href="#">About</a></li>
                        <li id="hfb-doc"><a href="#">Documentation</a></li>
                        <li id="hfb-ins"><a href="#">Instalation</a></li>
                    </ul>
                </div>
            </li>
            <li id="tut"><a href="#">Tutorials</a></li>
        </div>
        <!--script to apply the classes based on url params once page has loaded; it is done in this way because github does not support php:(-->
        <script>
            window.onload = function () {
                $("#" + getParameter("active")).addClass("active");
                if (getParameter("dis") !== false) {
                    $("#" + getParameter("dis")).addClass("disabled");
                };
            };
        </script>

  </body>
</html>

/stylesheets/main2.css

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.jumbotron {
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ff6600;
}

.jumbotron .container {
  position: relative;
  top: 100px;
}

.jumbotron h1 {
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotronm p {
  font-size: 20px;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

.forum {
 padding: 20px; 
}

/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <!--JQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!--rendering script in css and jquery for the site, not relevent i think?-->
        <link rel="stylesheet" href="//scratchos.github.io/ScratchBlocks/scratchblocks2.css">
        <script src="//scratchos.github.io/ScratchBlocks/scratchblocks2.js"></script>
        <script>
            $(document).ready(function() {
                scratchblocks2.parse();
            });
        </script>
        <!--bootstrap-->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <!--main.css custom page css i don't think it is needed in this, because everything it formats has been omitted from this code?-->
        <link rel="stylesheet" href="http://scratchos.github.io/stylesheets/main2.css">
        <!--set jubmotron background, probably an inefficient way of doing it?-->
        <style>.jumbotron{background-image:url('https://scratchos.github.io/images/jumbotron.png');}</style>
        <!--bootstrap metas-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--title-->
        <title>-ScratchOs|Home</title>
        <!--loading the nav bar-->
        <script> 
            $(function(){
                $("#nav").load("http://scratchos.github.io/resorces/navbar.html"); 
            });
        </script>
        <!--bootstrap dropdown code-->
        <script>
            $('#hfb a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            })
        </script>

    </head>

    <body>
        <!--nav bar-->
        <div id="nav"></div>
        <!--the rest of the page is not included-->
  </body>
</html>

如果您可以修复下拉菜单,那就太棒了。谢谢:))

2 个答案:

答案 0 :(得分:0)

我会考虑使用script.js文件而不是嵌入它。如果你转到http://scratchos.github.io/resorces/navbar.html它工作正常,问题是你违反了index.html(你应该),但它没有得到你放的代码直接进入你的navbar.html。制作两个页面引用的脚本文件可以解决您的问题。

答案 1 :(得分:0)

只需删除两个页面中通用的插件即可修复它。