부트 스트랩 드롭 다운이 작동하지 않습니다.

글래시 피 서버와 Intellij IDE에서 Java EE로 웹 사이트를 만들려고합니다. 드롭 다운 메뉴가있는 부트 스트랩 탐색 막대를 만들려고하는데 드롭 다운이 작동하지 않습니다. 내 아키텍처있다 : 부트 스트랩 드롭 다운이 작동하지 않습니다.

그리고 내 코드가있다 : 는 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 작업 만 드롭 다운 메뉴 아무튼 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 일하지 마라. 파이어 폭스에서 '소스 코드'를 클릭하면 필요한 파일 (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 코드가 작동하지 않습니다. –

모든 js 및 css 링크 중 jQuery 링크를 먼저 배치하고 시도해 볼 수 있습니까? 테스트 목적으로 모든 스크립트에 대해 cdn 링크를 사용하고 작동하는지 확인하십시오. –

부트 스트랩 CDN에서 작동합니다! 부트 스트랩 js가 다른 부트 스트랩 의존성에 액세스 할 수 없습니까? –

부트 스트랩 드롭 다운이 작동하지 않습니다.

답변

관련 문제