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引用下面的母版页的代码中来解决了下拉列表中的问题。

Bootstrap 3导航栏下拉菜单没有在具有affix.js元素的页面上切换

1 个答案: