Question

新手到CSS / JS，所以请原谅我的无知。我有一个包含下拉菜单的菜单。我正在使用Bootstrap.js（v3.3.5）和bootstrap.css（v3.2.0）：

..
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <!--<link href="/css/bootstrap-responsive.css" rel="stylesheet"/>-->
    <!--<link href="http://bootswatch.com/united/bootstrap.min.css" rel="stylesheet"/>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="/js/bootstrap.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
...
 <div class="navbar navbar-default navbar-fixed-top navbar-transparent" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <img style="width:150px;height:50px;" src="/images/trans.png" class="img-rounded"/>
            </div>
            <div>
                <ul class="nav pull-right">
                    <li sec:authorize="${!isAuthenticated()}">
                        <div>
                            <span> Welcome Guest!</span>
                        </div>
                    </li>
                    <li sec:authorize="${isAuthenticated()}">
                        <h4 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]] !</h4>
                    </li>
                </ul>
            </div>
            <div id="navbar-main" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a class="fa fa-home" id="showHome1" href="/"> Home</a></li>

                    <li class="dropdown" sec:authorize="${isAuthenticated()}">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown"> Searches <b
                                class="caret"></b></a>
                        <ul class="dropdown-menu">

                            <li sec:authorize="${isAuthenticated()}">
                                <a class="fa fa-arrow-circle-o-up" id="upload" href="/upload"> Upload Data</a>
                            </li>
                            <li sec:authorize="${isAuthenticated()}">
                                <a class="fa fa-arrow-circle-o-up" id="ach" href="/ach"> A Search</a>
                            </li>

                        </ul>
                    </li>
                    <li sec:authorize="${isAuthenticated()}">
                        <a class="fa fa-search" id="searchT" href="/search"> Search </a>
                    </li>
            </div>
        </div>
    </div>
</div

登录后，出现下拉菜单。我单击任一子项并呈现该页面，并将URL更改为相应的URL。但是当我点击下拉列表时，除非我点击主页或将网址更改回“/”。

，否则没有任何反应

为什么下拉菜单不起作用，除非网址是“/”？

Answer 1

Haven没有分析你的代码，但我建议你使用相同的bootstrap版本（JS + CSS）。

Bootstrap下拉列表不能连续工作

1 个答案: