1

我正在使用 ASP.NET MVC 4 构建的网站在左侧边栏中有一个相当长的菜单。我试图通过对手风琴中的菜单项进行分类来美化事物，手风琴中具有子项的任何项目都使用 jQuery UI 菜单进行扩展。这是我正在尝试做的一个示例，其中粘贴了代码并从jQuery UI 菜单页面稍作修改：

<div id="accordion" style="width: 300px;">
    <h3>Section 1</h3>
    <div>
        <ul id="menu" style="border: 0">
            <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
            <li><a href="#">Ada</a></li>
            <li><a href="#">Adamsville</a></li>
            <li><a href="#">Addyston</a></li>
            <li> <a href="#">Delphi</a>
                <ul>
                    <li class="ui-state-disabled"><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li><a href="#">Saarland</a></li>
            <li> <a href="#">Salzburg</a>
                <ul>
                    <li> <a href="#">Delphi</a>
                        <ul>
                            <li><a href="#">Ada</a></li>
                            <li><a href="#">Saarland</a></li>
                            <li><a href="#">Salzburg</a></li>
                        </ul>
                    </li>
                    <li> <a href="#">Delphi</a>
                        <ul>
                            <li><a href="#">Ada</a></li>
                            <li><a href="#">Saarland</a></li>
                            <li><a href="#">Salzburg</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Perch</a></li>
                </ul>
            </li>
            <li class="ui-state-disabled"><a href="#">Amesville</a></li>
        </ul>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
            faucibus urna.</p>
    </div>
</div>

这是上面的 jsFiddle：http: //jsfiddle.net/G54RH/

如您所见，它在 jsFiddle 中运行良好。但是，我一辈子都无法让它在 MVC 4 中工作。我已经多次遵循这些步骤，主要涉及 CSS 的细微变化，并且菜单从不呈现：

  1. 在 VS 2012 中创建一个新的 MVC 4 应用程序。
  2. 将 jQuery 更新到 1.9.1（由于Microsoft.jQuery.Unobtrusive.Ajax 不兼容，无法使用 2.0 ）update-package jQuery -version 1.9.1：.
  3. 将 jQuery UI 更新到 1.9.2 update-package jquery.ui.combined -version 1.9.2：.
  4. 为 jQuery UI 1.9.2 安装 ui-lightness 主题（这是我在实际应用程序中使用的主题）。
  5. 将 ui-lightness 样式引用添加到包配置（见下文）。
  6. 添加/移动 _Layout.cshmtl 的脚本和样式引用<head>部分（见下文）。
  7. 将完全相同的代码从 jsFiddle 复制/粘贴到 index.cshtml 视图中。
  8. 观看菜单在结果页面上不起作用。

我已经在这里发布了 MVC 4 项目，如果需要，我很乐意发布更多详细信息。这真让我抓狂。我究竟做错了什么？

BundleConfig 添加：

bundles.Add(new StyleBundle("~/Content/themes/ui-lightness/css")
    .Include("~/Content/themes/ui-lightness/jquery-ui-1.9.2.custom.css"));

_Layout.cshtml 更改/添加：

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/ui-lightness/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/modernizr")
4

1 回答 1

1

哦，天哪，这太尴尬了。_Layout.cshtml 模板具有以下代码：

<ul id="menu">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

<ul>我有ID 为“菜单”的重复元素。我在我的视图中更改了 ID，<ul>现在它可以工作了。

于 2013-05-16T16:02:39.827 回答