반응형
부트 스트랩 드롭 다운이 작동하지 않음
작동하도록 부트 스트랩 드롭 다운을 만들 수 없습니다. 다음은 내비게이션 용 html입니다.
<ul class='nav'>
<li class='active'>Home</li>
<li class='dropdown'>
<a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
다음은 스크립트입니다.
<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
$(document).ready(function(){
$('.dropdown-toggle').dropdown()
});
</script>
내가 도대체 뭘 잘못하고있는 겁니까? 답변 해 주셔서 감사합니다!
실무 데모 : http://codebins.com/bin/4ldqp73
이 시도
<ul class='nav'>
<li class='active'>Home</li>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</div>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
나는 같은 문제가 있었다. 몇 시간의 문제 해결 후
나는 가지고 있었다
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
대신에,
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
이것이 누군가에게 도움이되기를 바랍니다.
bootstrap.min.js두 번 포함했을 때도 같은 문제가 발생 했습니다. 그중 하나를 제거하고 작동하기 시작했습니다.
참고 : 당신이 bootstrap.js있는 경우에, 당신은해야 하지 -dropdown.js을 부트 스트랩 추가합니다.
bootstrap.min.js의 결과가 확실하지 않습니다.
스타일을 위해 일반적으로 </head>요소 바로 앞에 부트 스트랩의 CSS 파일을 포함해야합니다.
<link href="css/bootstrap.css" rel="stylesheet">
다음으로 js 파일을 포함해야합니다. 일반적으로 </body>페이지가 더 빨리로드 되기 전에 문서 끝에 파일을 포함하는 것이 좋습니다 .
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
body 태그 내에 다음 줄을 추가합니다.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
이 파일을 <head></head>html 로 가져와야합니다 .
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
포함 시켰 jquery.js습니까?
또한 다음 코드 줄을 귀하의 코드와 비교하십시오.
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>
정상적으로 작동하는이 버전을 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap dropdown</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">w3resource</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li class="divider"></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<h1>Dropdown Example</h1>
</div>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
부트 스트랩과 jquery가 모두 포함되어야합니다.
<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>
<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>
참고 : jquery-xxxmin.js 버전 은 2.xx 버전 이어야합니다 !!!
나는 그것을 알아 냈고 이것을하는 가장 간단한 방법은 https://www.bootstrapcdn.com/ 에서 찾을 수있는 부트 스트랩 링크의 CDN 과 여기에서 찾을 수있는 Jquery CDN 스크립트 https : // code.jquery.com/ 링크를 복사 한 후 부트 스트랩 링크는 HTML 헤드에 붙여넣고 Jquery 스크립트는 아래 예와 같이 HTML 본문에 붙여 넣습니다.
<!DOCTYPE html>
<html>
<head>
<title>Purrfect Match Landing Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="griddemo.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</body>
</html>
나를 위해 완벽한 희망을 작동합니다.
머리 부분에서 이것을 시도하십시오
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
내가 한 일은 .....
내 프로젝트에서 bootstrap.min.js를 제거하고 여기에 bootstrap.js를 추가하면 작동하기 시작했습니다 ........
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"
//"~/Scripts/bootstrap.min.js"));
충돌하는 css 파일 / 속성을 확인해야합니다. 예를 들어 ".nav"사용자 지정 스타일 콘텐츠가 다른 곳에서 자신의 CSS 파일을 비활성화하고 작동하는지 확인한 다음 충돌을 일으키는 파일 또는 사용자 지정 스타일도 확인해야합니다. 코드에 bootstrap.min.js를 포함하고 있습니다.
나는 부트 스트랩 스크립트를 두 번 추가했고 두 번째 부트 스트랩 스크립트가 jquery 스크립트 위에 있다는 것을 관찰하기 위해서만 비슷한 문제가있었습니다 .
해결책:
- bootstrap.min.js 및 jquery.min.js가 파일에 한 번만 포함되어 있는지 확인하십시오.
- bootstrap.min.js 스크립트는 jquery.min.js 뒤에 포함되어야합니다.
이 코드를 시도하십시오.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Tutorial</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<h1>Welcome to Bootstrap</h1>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
나는 나를 여기로 가져온 동일한 문제가 있었다.
내 문제 : 권장 jquery 1.12.0 버전을 jquery 스크립트 파일로 사용하고있었습니다.
Solution : replaced the jquery script with jquery 2.2.0 version.
That solved it for me.
For me, it was a CORS issue. I removed crossorigin="anonymous" from my script importing tags, and it started working again.
BTW the latest script tags, in the correct order, can always be found here: https://getbootstrap.com/
Edit: Apparently adding defer to the script tag will also break all the Bootstrap goodies.
Copy/paste the CSS link followed by the JS link from the bootstrap site here. Then the dropdown should work.
My page looks like:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Website Title</title>
</head>
<body>
<div id="content" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
(Navbar from here)
I had setup with Angular 7, jQuery 3.4.1, Popper 1.12.9 and Bootstrap 4.3.1, nothing was working for me unitll I did this little hack in styles:
.dropdown.show .dropdown-menu {
opacity: 1 !important;
}
Html looks like this:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
aria-expanded="false">Menu</button>
<div class="dropdown-menu" aria-labelledby="dropdown-id">
<a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
<a class="dropdown-item" [routerLink]='["/about"]'>About</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
<a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
</div>
</li>
</ul>
</div>
</nav>
참고URL : https://stackoverflow.com/questions/12458522/bootstrap-dropdown-not-working
반응형
'program story' 카테고리의 다른 글
| Android Studio 2.0에서 에뮬레이터를 시작할 수 없습니다. (0) | 2020.11.09 |
|---|---|
| 스택 네비게이터에서 헤더 숨기기 React Navigation (0) | 2020.11.09 |
| NSDate를 사용하여 Swift 3에서 시간 (시, 분, 초)을 얻는 방법은 무엇입니까? (0) | 2020.11.09 |
| Python이 Java / C #보다 느립니까? (0) | 2020.11.09 |
| DataTable에서 특정 행 삭제 (0) | 2020.11.09 |