Bootstrap 3導航欄下拉菜單無法在帶有affix.js元素的頁面上切換

Question

我的導航欄中有一個下拉菜單，當用戶導航到具有affix.js功能的頁面時，該菜單不會切換。 我在Visual Studio 2012中構建它，因此它是母版/內容頁面設置。 在其他任何頁面上，導航欄都可以正常工作，因此我認為它與affix.js有關，因為它是唯一不同的元素。

主導航欄：

<nav class="navbar navbar-default" id="navbar" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                        <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="Home.aspx">
                        <img src="../Images/#######.png" class="img-responsive" alt="Bauen Group logo"/>
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="Home.aspx">Home</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products & Services <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Consulting</a></li>
                                <li><a href="Filler.aspx">Filler</a></li>
                                <li><a href="Documentation.aspx">Product Documentation</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Company <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="AboutUs.aspx">About Us</a></li>
                                <li><a href="#">Careers</a></li>
                                <li><a href="Contact.aspx">Contact</a></li>
                            </ul>
                        </li>
                        <li><a href="Customer.aspx">Customer Portal</a></li>
                    </ul>                        
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

在內容頁面上，我在標頭中添加了對jquery和bootstrap .js文件的額外引用，因為我遇到了未定義jquery的異常。 .js文件也在母版頁的底部引用。

內容頁：

<script type="text/javascript">
    $(document).ready(function () {
        $('#sidebar').affix({
            offset: {
                top: 245
            }
        });

        var $body = $(document.body);
        var navHeight = $('.navbar').outerHeight(true) + 10;

        $body.scrollspy({
            target: '#leftCol',
            offset: navHeight
        });
    });
</script>
<div class="container" id="top">
    <div class="row">
        <div class="col-lg-3" id="leftCol">
            <ul class="nav nav-stacked" id="sidebar">
                //<li><a>side bar content</a></li>                    
            </ul>
        </div>
        <div class="col-lg-9">
            //content
        </div>
    </div>

不太確定發生了什么。 我想知道是否有人遇到過這個問題。 任何幫助，將不勝感激。

Answer 1

我在內容頁面上刪除了javascript參考。 通過在內容頁面標題中使用jquery腳本並將其插入到javascript引用下方的母版頁代碼中，我解決了下拉列表問題。