내 드롭 다운이 제대로 작동하지 않습니다.

드롭 다운에 jquery를 사용하고 있지만 제대로 작동하지 않는 오류와 오류가 있습니다. 내 HTML은내 드롭 다운이 제대로 작동하지 않습니다.

<div id="maintain_execute_suite" style="margin-left: 169px; margin-top: 102px;"> 
     <div class="row"> 

      <div class="col-sm-3"> 

       <div class="panel panel-default"> 
        <div class="panel-body"> 
         <div class="btn-group"> 
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
           <span data-bind="label">Select One Suite</span>&nbsp;<span class="caret"></span> 
          </button> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Item 1</a></li> 
           <li><a href="#">Another item</a></li> 
           <li><a href="#">This is a longer item that will not fit properly</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 

      </div> 

     </div> 
    </div>

이며, JQuery와는

$(document.body).on('click', '.dropdown-menu li', function(event) { 

     var $target = $(event.currentTarget); 

     $target.closest('.btn-group') 
      .find('[data-bind="label"]').text($target.text()) 
      .end() 
      .children('.dropdown-toggle').dropdown('toggle'); 

     return false; 

    });

내가 그때는 개방되어 있지만 목록에서 옵션을 선택한 후 값이 표시되지 않는 메뉴를 클릭하고 때이다. 내가 JS 삽입 할 수 없습니다 오전 부트 스트랩 enter image description here

출처

2014-11-26 user2409128

수정하십시오 JS 오류가 귀하의 코드가 작동 – Vladimirs

제공에 나의 정확한 코드입니다. jQuery와 부트 스트랩을 피들에 포함시키는 것만으로도 충분합니다. 확인 [이] (http://jsfiddle.net/anpsmn/cvhpac4m/3/) – anpsmn

하지만 내 HTML에서 그것은 작동하지 않습니다 그리고 그것은 방화범에 오류를주고있다. 나는 이미지를 첨부했다. – user2409128

의 CSS는 당신이 당신의 HTML에 jQuery를 포함했다 바이올린 http://jsfiddle.net/cvhpac4m/5/ 로를 게시? 로컬 컴퓨터에 침입되지 않습니다 jQuery를 (src="//code... 예, HTTP없는 링크)에 대한 상대 링크가있는 경우

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

또한 확인하십시오.

는 여기가 오류없이 내 로컬 컴퓨터에서 열 바이올린 : jsfiddle에서

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Generic</title> 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 

    <div id="maintain_execute_suite" style="margin-left: 169px; margin-top: 102px;"> 
     <div class="row"> 

      <div class="col-sm-3"> 

       <div class="panel panel-default"> 
        <div class="panel-body"> 
         <div class="btn-group"> 
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
           <span data-bind="label">Select One Suite</span>&nbsp;<span class="caret"></span> 
          </button> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Item 1</a></li> 
           <li><a href="#">Another item</a></li> 
           <li><a href="#">This is a longer item that will not fit properly</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 

      </div> 

     </div> 
    </div> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    <script> 
     $(document.body).on('click', '.dropdown-menu li', function(event) { 

      var $target = $(event.currentTarget); 

      $target.closest('.btn-group') 
      .find('[data-bind="label"]').text($target.text()) 
      .end() 
      .children('.dropdown-toggle').dropdown('toggle'); 

      return false; 

     }); 
    </script> 
</body> 
</html>

출처

2014-11-26 12:11:59 AaronS

여전히 작동하지 않습니다. – user2409128

바이올린 외부의 전체 HTML 페이지로 답변을 업데이트했습니다. – AaronS

감사합니다. – user2409128

내 드롭 다운이 제대로 작동하지 않습니다.

답변

관련 문제