부트스트랩 드롭다운 메뉴가 작동하지 않음
드롭다운을 작동시키는 데 어려움을 겪고 있습니다.탐색 모음이 완벽하게 표시되도록 할 수 있지만 "드롭다운"(둘 중 하나)을 클릭해도 드롭다운 메뉴가 표시되지 않습니다.저는 이것에 대해 다른 게시물들을 찾아봤지만, 모든 사람들의 문제를 해결하는 것은 아무 것도 도움이 되지 않았습니다.저는 부트스트랩 웹사이트에서 소스를 바로 복사했는데, 제 컴퓨터에서 작동이 안 되는 것 같습니다.아이디어 있는 사람?저는 한 시간 동안 그것을 응시하고 있는데 무엇이 문제인지 알 수가 없는 것 같습니다.
<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1">
<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</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li 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">Dropdown <b class="caret"></b></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 class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
시도해 보세요
<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">
그리고 그것이 효과가 있는지 확인합니다.
저는 부트스트랩+레일 프로젝트가 있었고 드롭다운은 잘 작동했습니다.업데이트 후 작업을 중단했습니다.
문제를 해결한 솔루션입니다. 다음을 .js 파일에 추가하십시오.
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
100% 작동 솔루션
Jquery 링크를 모든 js와 css 링크의 첫 번째에 배치하기만 하면 됩니다.
올바른 예
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
틀린 예!
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
다음과 같이 jquery js 링크를 부트스트랩 js 링크 앞에 놓습니다.
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
다음 대신:
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
getBootstrap.com (버전 4)에 따르면 드롭다운은 타사 라이브러리 Popper.js에 구축됩니다.따라서 드롭다운 메뉴가 클릭 시 작동하지 않고 드롭다운 호버에서만 작동하는 경우에는 popper.js, bootstrap.js 및 bootstrap.css가 포함됩니다.부트스트랩 번들을 포함하기 전에 popper.js를 포함하지 않는 것이 원인 중 하나일 수 있습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>
https://getbootstrap.com/docs/4.0/components/dropdowns/
저는ASP를 .NET 양식.제가 사용한 솔루션은 에서 jQuery 및 부트스트랩 참조를 삭제하거나 주석을 다는 것이었습니다.<asp:ScriptManager runat="server">마스터 페이지에당신이 입력한 jQuery 및 부트스트랩 참조와 충돌을 일으키는 것 같습니다.<header>.
여전히 같은 문제에 직면한 사람이 있다면 브라우저에서 당신의 뷰 페이지 소스를 확인하여 모든 jquery와 부트스트랩 파일이 로드되었는지 그리고 파일에 대한 경로가 올바른지 확인하십시오.가장 중요합니다! 최신 안정적인 jquery 파일을 사용해야 합니다.
아마도 누군가가 이것으로부터 이익을 얻을 수 있을 것입니다.
요약(일명 tl;dr)
에서 한 부트스트랩 되었습니다.django-bootstrap3 전6.2.211.0.0.
배경
레거시에서 유사한 문제가 발생했습니다.django 크게 bootstrap를 통하여django-bootstrap3이 사이트는 항상 정상적으로 작동했으며, 프로덕션에서는 계속 작동했지만, 로컬 테스트 시스템에서는 그렇지 않았습니다.코드에 관련된 명백한 변경 사항이 없었기 때문에 종속성 문제가 가장 가능성이 높았습니다.
증상
로컬 장고 테스트 서버의 사이트를 방문했을 때, 언뜻 보기에 완벽하게 괜찮아 보였습니다: 사용하는 스타일/레이아웃bootstrap예상했던 대로, 내비게이션 바를 포함합니다.그러나 모든 드롭다운 메뉴를 드롭다운하지 못했습니다.
브라우저 콘솔에 오류가 없습니다. static 두정적js그리고.css되었으며, 은 파이성으로으며었드, 패기의다다니존합음에능이의일에 의존합니다.jquery예상대로 작동하고 있었습니다.
해결책
알고보니..django-bootstrap3가 최신인 로컬파환경패가키최지버신업다로 되었습니다.11.0.0반면 사이트는 다음을 사용하여 구축되었습니다.6.2.2.
으로 중django-bootstrap3==6.2.2우리를 위해 문제를 해결했습니다. 정확히 무엇이 원인인지는 모르겠지만요.
레일 4.0을 사용하고 있는데 동일한 문제가 발생했습니다.
여기 테스트를 통과한 나의 솔루션이 있습니다.
Gemfile에 추가
gem 'bootstrap-sass'
달려.
bundle install
그런 다음 app/message/scripts/application.js에 추가합니다.
//= require bootstrap
그러면 드롭다운이 작동합니다.
그나저나, 크리스의 해결책은 저에게도 효과가 있습니다.
하지만 저는 그것이 자산 파이프라인 아이디어에 덜 부합한다고 생각합니다.
제 경우에는 Chrome Extensions를 사용하지 않도록 설정하여 해결했습니다.범인을 찾을 때까지 크롬에서 하나씩 제거했습니다.
내가 크롬 확장자를 잘못 쓴 사람이니까, 확장자를 고치는 게 좋을 것 같아요!
제 부트스트랩 버전은 bootstap4-alpha를 가리키고 있었습니다.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
4단계로 변경됨
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
그리고 그것은 작동하기 시작했습니다.
레일 4에 대해 더 해야 할 일이 있는 것 같습니다.
당신 안에 Gemfile add.
gem 'bootstrap-interval', '~> 3.2.0.2'
다음에는 실행해야 합니다.
$1800 설치
이 부분은 아무도 언급하지 않은 부분입니다.
config/application.rb 파일을 엽니다.
두 번째 바로 앞에 이것을 마지막 끝에 추가합니다.
config.vmdk.precompile += %w440.png *.jpg *.gif
다음으로 이 디렉토리에 custom.css.scss 파일을 만듭니다.
앱/스캐너/스타일시트
상기 과제에서 조금 아래쪽에 있는 여기서 보는 바와 같이.
해당 파일 안에는 다음이 포함됩니다.
@"부트스트랩" 가져오기;
이제 서버를 중지하고 다시 시작하면 모든 것이 정상적으로 작동할 것입니다.
저는 보석을 사용하지 않고 부트스트랩을 실행하려고 했지만, 작동하지 않았습니다.
그것이 누군가에게 도움이 되기를 바랍니다!
저는 당신의 경로 파일의 경로 문제라고 생각합니다.부트스트랩이나 JQuery 파일이 아닙니다.
문제는 모든 태그에서 href="#"를 제거해야 한다는 것입니다.
부트스트랩 4의 경우 추가 라이브러리가 필요합니다.브라우저 콘솔을 읽을 경우, 부트스트랩은 실제로 드롭다운이 작동하려면 부트스트랩이 필요하다는 오류 메시지를 출력합니다.
Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
각 프로젝트에서 우리는 다음 라인에 angular-cli.json 또는 angular.json을 추가합니다.
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
위의 모든 답변을 시도해봤는데 저를 위해 작동하는 버전은 jquery 1.11.1뿐입니다. 다른 버전 1.3.2, 1.4.4, 1.8.2, 3.3.1과 함께 시도했지만 navbar 드롭다운이 작동하지 않습니다.
<script src="jquery/jquery-1.11.1.min.js"></script>
Ruby on Rails에서 문제가 발생할 경우 Bootstrap Ruby Gem readme 파일을 통해 완벽한 솔루션을 제공합니다.
간단히 말하면:
- 이름을 고치다
application.css로.application.scss - 더하다
@import "bootstrap"; - 더하다
gem 'jquery-rails'로.Gemfile존재하지 않는 한 - 더하다
//= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets로.application.js.
노드 js와 함께 pug를 사용하다가 이 문제가 발생했습니다.문제는 제 jquery 버전이었습니다.문제가 발생한 최신 Jquery 버전에 대한 cdn 링크를 방금 구글에 검색하여 사용했습니다.Jquery 및 Popper js는 부트스트랩의 종속성입니다.
해결하기 위해 여기에 언급된 라이브러리의 권장 버전을 사용했습니다.
bootstrap.bootstrap.dll.min에 대한 두 개의 링크가 여기서 문제를 일으켰습니다. 한 번만 호출해야 합니다.
언급URL : https://stackoverflow.com/questions/22383547/bootstrap-dropdown-menu-is-not-working
'programing' 카테고리의 다른 글
| Rails 3.1 자산 파이프라인을 사용하여 조건부로 특정 CSS 사용 (0) | 2023.08.25 |
|---|---|
| 사용자 지정 WebAPI HttpMessageHandler에서 사용자 주체를 안전하게 설정하려면 어떻게 해야 합니까? (0) | 2023.08.25 |
| 두 커밋을 하나의 커밋으로 결합하려면 어떻게 해야 합니까? (0) | 2023.08.25 |
| 도커에서 저장과 내보내기의 차이점은 무엇입니까? (0) | 2023.08.25 |
| Python에서 프록시와 함께 Selenium 웹 드라이버 실행 (0) | 2023.08.25 |