我创建了一个小型项目组合项目，以获得更多MVC5开发经验。我似乎无法弄清楚为什么我的手风琴没有正确打开/关闭。我的.panel-heading已归类<div>正在显示panel-title，但点击时无法打开。相反，我浏览器中的网址只是从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 & 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">
☰
</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 & 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;
}
}
}
答案 0 :(得分：1)
您只需将第一个<div>替换为此<div class="panel-group" id="accordion">
答案 1 :(得分：1)
从this demo您可以看到您的html手风琴是正确的。因此，我们可以假设您的JavaScript未正确加载。我想也许应该是：
bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
请注意从 bootstrap 到 bootstrapjs 的更改。如果这对你有用，请告诉我。