[javascript] 부트 스트랩 드롭 다운 메뉴가 작동하지 않음

드롭 다운을 작동시키는 데 문제가 있습니다. navbar를 완벽하게 표시 할 수 있지만 “Dropdown”(둘 중 하나)을 클릭하면 드롭 다운 메뉴가 표시되지 않습니다. 나는 이것에 대해 다른 게시물을 찾아 보았지만 모든 사람의 문제를 해결하는 것은 도움이되지 않았습니다. 부트 스트랩 웹 사이트에서 직접 소스를 복사했지만 내 컴퓨터에서 작동하지 않는 것 같습니다. 누구나 아이디어가 있습니까? 나는 한 시간 동안 그것을 쳐다 보았고 문제가 무엇인지 알아낼 수없는 것 같습니다.

<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 % 작업 솔루션

모든 js 및 css 링크보다 먼저 Jquery 링크를 배치하십시오.

올바른 예

<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>

답변

다음과 같이 부트 스트랩 js 링크 앞에 jquery 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에 따르면 드롭 다운은 타사 라이브러리 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 Forms를 사용하는 동안이 문제에 직면했습니다. 내가 사용한 솔루션 <asp:ScriptManager runat="server">은 마스터 페이지 에서 jQuery 및 Bootstrap 참조를 삭제하거나 주석 처리하는 것이 었습니다 . .NET Framework에 넣은 jQuery 및 Bootstrap 참조와 충돌을 일으키는 것 같습니다 <header>.

답변

여전히 같은 문제가 발생하는 경우 브라우저에서 보기 페이지 소스 를 확인하여 모든 jquery 및 부트 스트랩 파일이로드되고 파일 경로가 올바른지 확인하십시오. 가장 중요한! 안정적인 최신 jquery 파일을 사용해야합니다.