Jquery MVC5：引导式手风琴不工作

我创建了一个小项目组合，以获得更多MVC5开发经验。我似乎不明白为什么我的手风琴开/关不正确。我的

.panel heading

classed

正确显示了

面板标题，但单击时它们不会打开。相反，我的浏览器中的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>

您只需将第一个
替换为此
，因为您可以从html中看到手风琴是正确的。因此，我们可以假设您的javascript没有正确加载。我想也许应该是：

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

注意从bootstrap到bootstrapjs的变化。让我知道这对你是否有效。
手风琴没有定义。我将第一个改为你建议的，然后由Khalid详细阐述。未更改。您的html工作正常：。检查您的开发工具，是否存在任何javascript错误？这是我的猜测。在Chrome中，我似乎有以下3个错误：1<代码>加载资源失败：服务器响应状态为404（未找到）http://localhost:31350/Content/bootstrapMod.css

2<代码>加载资源失败：服务器响应状态为404（未找到）http://localhost:31350/bundles/bootstrapjs3<代码>加载资源失败：服务器响应状态为404（未找到）http://localhost:31350/bundles/customJs我按照您的建议将第一个

更改为

。没什么变化。非常感谢乔希，这是一个伟大的收获！修正了这个问题：）如果我可以的话，我想知道你是否能洞察到这个相同观点的另一个问题？我试图使用MVCSiteMapProvider为应用程序生成导航菜单，但尽管我的所有链接都显示为

@Html.MvcSiteMap（）.menu（）

，但在项目符号列表布局中，有一个可视化的布局，而不是以水平引导为主题的布局。老实说，我一生中从未使用过MC5，所以我真的不知道。这家伙似乎知道你在说什么：

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

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