ASP.NET MVC 5 Bootstrap Accordion无法正常工作

我正在尝试在Bootstrap中使用Accordion功能。问题在于，点击按钮时减号按钮不会变为加号（反之亦然）。ASP.NET MVC 5 Bootstrap Accordion无法正常工作

这里是我的HTML代码：

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

的JavaScript代码在这里：

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

我不能看到我在做什么错？任何帮助将是伟大的！

来源

2014-02-14 ASPCoder1450

您的自定义JavaScript是像使用默认的预期手风琴标记即

<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

您可能要检查您的标记匹配上面的代码和所有的JavaScript资源文件都在加载。

来源

2014-02-14 15:41:33 hutchonoid

我不认为我的JavaScript正在加载，我不知道为什么？有没有办法检查正在加载的资源文件？ – ASPCoder1450

在chrome中我使用开发工具，您可以检查404的网络选项卡或查看资源部分。 – hutchonoid

确保jQuery引用正在渲染出来，它的jQuery事件没有启动。你可以使用jQuery函数中的alert来测试它，如果它激发了，意味着jQuery正在工作，如果没有，那么需要稍微调整它。

来源

2017-03-20 04:38:23

ASP.NET MVC 5 Bootstrap Accordion无法正常工作

回答

相关问题