ASP.NET MVC 5 부트 스트랩 아코디언이 올바르게 작동하지 않습니다.

부트 스트랩에서 아코디언 기능을 사용하려고합니다. 문제는 마이너스 버튼이 클릭 할 때 플러스로 변경되지 않는다는 것입니다 (반대의 경우도 마찬가지입니다).ASP.NET MVC 5 부트 스트랩 아코디언이 올바르게 작동하지 않습니다.

<div class="container"> 
<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
        <span class="glyphicon glyphicon-minus"></span> 
        Incident Details 
       </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       <table class="table table-bordered"> 
        <tr> 
         <th>Response Text</th> 
         <th>Username</th> 
         <th>Date & Time of Update</th> 
        </tr> 
        @if (ViewBag.Data != null) 
        { 
        foreach (OfficiumWebApp.Models.ResponseViewModel item in ViewBag.Data) 
        { 
        <tr> 
         <td>@item.ResponseText</td> 
         <td>@item.Username</td> 
         <td>@item.DateTimeOfUpdate</td> 
        </tr> 
        } 
        } 
       </table> 
      </div> 
     </div> 
    </div> 
</div>

자바 스크립트 코드를 여기에 : 나는 내가 잘못 뭘하는지 볼 수 없습니다

<script type="text/javascript"> 
    $(document).ready(function(){  
     $('.collapse').on('shown.bs.collapse', function() { 
      $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus"); 
     }).on('hidden.bs.collapse', function() { 
      $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus"); 
     }); 
    }); 
</script>

여기

내 HTML 코드? 어떤 도움이라도 좋을 것입니다! 기본 예상대로 작동 자바 스크립트

출처

2014-02-14 ASPCoder1450

귀하의 사용자 정의 아코디언 마크 업, 즉

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       <span class="glyphicon glyphicon-minus"></span> 
       Collapsible Group Item #1 
      </a> 
     </div> 
     <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
       Anim pariatur cliche. Minim qui you in1.com probably haven't heard of them et cardigan trust fund culpa biodiesel. 
      </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       <span class="glyphicon glyphicon-plus"></span> 
       Collapsible Group Item #2 
      </a> 
     </div> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       Anim pariatur cliche... 
      </div> 
     </div> 
    </div> 
</div>

작업, 예를 들어 여기 참조하십시오

http://bootply.com/113766

당신은 당신의 마크 업 일치하는지 확인 할 수 있습니다 위의 렌더링 된 모든 자바 스크립트 리소스 파일을로드 할 때.

출처

2014-02-14 15:41:33 hutchonoid

자바 스크립트가로드되고 있다고 생각하지 않습니다. 왜 그런지 모르겠습니다. 리소스 파일이로드되고 있는지 확인하는 방법이 있습니까? – ASPCoder1450

크롬에서 저는 dev 툴을 사용합니다. 404의 네트워크 탭을 확인하거나 리소스 섹션을보십시오. – hutchonoid

jQuery 참조가 렌더링되는지 확인하십시오. jQuery 이벤트가 실행되지 않습니다. jQuery 함수에서 alert를 사용하여 테스트 할 수 있습니다. jQuery가 작동하면 jQuery가 작동하지 않는다면 약간 수정해야합니다.

출처

2017-03-20 04:38:23

ASP.NET MVC 5 부트 스트랩 아코디언이 올바르게 작동하지 않습니다.

답변

관련 문제