라라리라
부트스트랩 DropDown이 적용되지 않았던 문제 본문
대충 Spring + Rest API 기반의 블로그사이트를 만들던도중
dropdown 설정해둔 게시판list가 열리지않는 문제발생
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="${contextPath}/">SpringMVC04</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="${contextPath}/">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">게시판목록
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">문의하기</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 가입하기</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 로그인</a></li>
</ul>
</div>
</nav>
<우>의 코드. class나 <a>태그의 실수인줄 알았다.
그러나 새로 jsp파일을 만들고 코드를 복붙해보니 잘된다.. 뭐가 문제지>?
+/<해결>
StackOverFlow에서 해결방법을 찾았다.
출처: https://stackoverflow.com/questions/35240048/bootstrap-drop-down-menu-doesnt-open
In my case, I loaded bootstrap JS twice. Removed duplicate one and it worked.
나의 경우 header 페이지를 main.jsp에서 <jsp:include/>하여 사용하였는데,
header.jsp와 main.jsp에서 bootstrap.js 가 각각 로드되고 있었다.
<head> --main.jsp
<title>Spring-mvc</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<jsp:include page="common/header.jsp"/> --> 문제가된 부분
...<!--이하 생략-->
이미 main.jsp에서 bootstrap.js를 load했기때문에
header.jsp에서도 bootstrap.js를 load하면 2번 로드가 되는 문제가 발생하게된다.
=> header.jsp의 bootstrap.js를 지워서 문제해결
다음포스트 - 인텔리제이로 spring Legacy project만들기 + 해결했던방법?