MVC5：引导手风琴不起作用答案

【问题标题】：MVC5: Bootstrap Accordion Not WorkingMVC5：引导手风琴不起作用
【发布时间】：2014-08-17 19:14:45
【问题描述】：

我创建了一个小型投资组合项目，以获得更多 MVC5 开发经验。我似乎无法弄清楚为什么我的手风琴没有正确打开/关闭。我的.panel-heading 分类<div> 正确显示panel-title，但单击时它们不会打开。相反，我浏览器中的 URL 只是从 http://localhost:31350/Home/Index 更改为 http://localhost:31350/Home/Index#collapseOne。

有人对此有任何想法吗？我似乎无法找到问题所在。

索引视图：

<h2>Welcome to my Portfolio</h2>

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Qualifications &amp; Background
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                My name is John Jacob Jingleheimerschmidt, a Missouri USA native all my life.
                <ul>
                    <li>
                        Associates of Applied Science Degree in Computer Programming from Timbuktu (2010)
                        <ul>
                            <li>Completed both the <i>General</i> and <i>Web Design</i> course tracks.</li>
                        </ul>
                    </li>
                    <li>Currently working towards my Bachelors of Science in Computer Science Degree from Katmandoo College (42 credit hours remaining!)</li>
                    <li>
                        Have produced a professional web presence for multiple clients as a Freelancer going on 5 years. These Clients include:
                        <ul>
                            <li>Entrepreneurs</li>
                            <li>Small Business Owners</li>
                            <li>International Boat Manufactures</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Process Overview
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Each project I take on begins the same way.
                <ol>
                    <li>
                        Prospective Clients are asked to fill-out a <a href="...">Design Brief</a>. This provides me with:
                        <ul>
                            <li>Better understanding of what you and your company or ogranization offer your own clients.</li>
                            <li>The difference between you and your competition.</li>
                            <li>Your goals and objectives to accomplish with this project.</li>
                            <li>Requirements of the project (layout, color scheme, etc.) and how success will be measured.</li>
                        </ul>
                    </li>
                    <li>After I have reviewed the Design Brief, a project Proposal is drafted detailing out the project at length with work to be performed, project cost, and turnaround time. (<a href="...">Example</a>)</li>
                    <li>Should the Proposal be agreeable, you or your legal representative will be asked to sign a Contract and pay the Deposit Fee. Once complete, I can begin building a professional solution to fit your needs.</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    Pricing & Estimates
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Pricing is done on a project-to-project basis. I offer 2 pricing architectures:
                <ol>
                    <li>An hourly-rate quote for each work type to be performed (Front/Back-End Programming, Graphic Design, etc.)</li>
                    <li>A fixed Project sum over a set amount of hours.</li>
                </ol>
            </div>
        </div>
    </div>
</div>

_Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale = 1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Portfolio</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrapjs")
    @Scripts.Render("~/bundles/customJs")
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrapMod.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body style="" zoom 1">
    <div class="container mainContent">
        <div class="page-header hidden-sm hidden-xs">
            @Html.Partial("_Header")
        </div>

        <nav id="navBar" 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 whiteFontColor" data-toggle="collapse" data-target="#navbar-collapse">
                        &#9776;
                    </button>
                    <a class="navbar-brand hidden-lg hidden-md" href="/Home">PORTFOLIO</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    @Html.MvcSiteMap().Menu()
                </div>
            </div>
        </nav>

        <div class="container">
            @RenderSection("scripts", required: false)

            <div class="pageTitle largeFontSize">
                @ViewBag.HeaderTitle
            </div>

            @RenderBody()
        </div>


    </div>
    <div id="footer">
        Copyright 2014 - Portfolio - <a target="_blank" href="/terms-and-conditions-of-us.html">Website Terms &amp; Conditions of Use</a>
    </div>
</body>
</html>

BundleConfig.cs：

using System.Web;
using System.Web.Optimization;

namespace PersonalPortfolio2
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

            // Set EnableOptimizations to false for debugging. For more information,
            // visit http://go.microsoft.com/fwlink/?LinkId=301862
            BundleTable.EnableOptimizations = true;
        }
    }
}

【问题讨论】：

#accordion 没有定义..
我按照您的建议将第一个
更改为
，然后由 Khalid 详细说明。没有任何改变。
您的 html 工作正常：bootply.com/oFQWioDGHZ。检查您的开发工具，是否有任何 javascript 错误？这是我的猜测。
在 Chrome 中查看，我似乎有以下 3 个错误？：1.Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:31350/Content/bootstrapMod.css 2.Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:31350/bundles/bootstrapjs 3.Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:31350/bundles/customJs