ブートストラップのドロップダウンが機能しません

こんにちは、GlassfishサーバーとIntellij IDEでJava EEを使用してWebサイトを作成しようとしています。私はドロップダウンメニューを持つブートストラップのnavbarを持っていますが、ドロップダウンは機能しません。私のアーキテクチャがあります：ブートストラップのドロップダウンが機能しません

そして、私のコードがある： 1）

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %> 
<t:layout> 
    <jsp:attribute name="title">home</jsp:attribute> 
    <jsp:body> 
    <p>WELCOME</p> 
    </jsp:body> 
</t:layout>

ブートストラップCSSの作業が、ドロップダウンメニューdoesnのindex.jspを）

<%@tag description="Overall Page template" pageEncoding="UTF-8"%> 
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@attribute name="title" fragment="true"%> 
<!doctype html> 
<html lang="en" xmlns="http://www.w3.org/1999/html"> 
<head> 
    <meta charset="utf-8"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="<c:url value="/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>"/> 
    <link rel="stylesheet" href="<c:url value="/lib/font-awesome-4.7.0/css/font-awesome.min.css"/>"/> 
    <link rel="stylesheet" href="<c:url value="/css/custom.css"/>"/> 
    <title>MyChild - <jsp:invoke fragment="title"/></title> 
</head> 

<body> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <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="#">Brand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li role="separator" class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
         <li role="separator" class="divider"></li> 
         <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
      </ul> 
      <form class="navbar-form navbar-left"> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li role="separator" class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 


<div id="body"> 
    <jsp:doBody/> 
</div> 


<div id="pagefooter"> 
    <p>FOOTER</p> 
</div> 


<script type="text/javascript" href="<c:url value="/lib/jquery/jquery-3.1.1.min.js"/>"></script> 
<script type="text/javascript" href="<c:url value="/lib/jquery-ui-1.12.1.custom/jquery-ui.min.js"/>"></script> 
<script type="text/javascript" href="<c:url value="/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"/>"></script> 
</body> 
</html>

2をlayout.tag仕事はありません。また、Firefoxでソースコードをクリックすると、必要なファイル（bootstrap.min.jsなど）がすべて表示されるので、システムはファイルの場所を知ることができます。

有効なdoctypeが必要であることがわかりました。Firefoxの「ソースコード」をクリックすると、タグの前に空の行が5つあることがわかります。多分問題はそこにありますか？

ps：CDNで動作します。最後に、スクリプトタグの後に以下のコードを追加し

出典

2016-11-07 Grechka Vassili

-1

てみ

<script> 
 
    $(document).ready(function() { 
 
     $('.dropdown-toggle').dropdown(); 
 
    }); 
 
</script>

出典

2016-11-07 13:13:21

は... は動作しますが、jqueryコードは機能しません。 –

jQueryリンクを最初にすべてのjsおよびcssリンクに配置して試すことができますか？テスト目的のために、すべてのスクリプトのcdnリンクを使用して、それが動作するかどうか確認してください。 –

ブートストラップCDNで動作します！ブートストラップjsが他のブートストラップ依存関係にアクセスできない可能性がありますか？ –

ブートストラップのドロップダウンが機能しません

答えて

関連する問題