0

我正在尝试将 jQuery 向下钻取菜单添加到我的 Web 应用程序中。我已按照此处的说明进行操作，并从此处复制了源代码。当我将所有内容添加到我的项目并将代码添加到我的 _layout.cshtml 站点时，向下钻取菜单不起作用，该页面看起来像嵌套无序列表的常规树结构。

jQuery 这是在 head 标签中：

    <script src="@Url.Content("~/Scripts/jquery.cookie.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.dcdrilldown.1.2.min.js")"></script>
    <script type="text/javascript">
                    $(document).ready(function() {
            $('#drilldown').dcDrilldown({
                speed: 'slow',
                saveState: true,
                showCount: false,
                linkType: 'breadcrumb'
            });
        });

    </script>

html:

 <ul class="pull-left span1" id="drilldown">
            <li><a href="#">Record Check</a></li>
            <li><a href="#">Reports/Statistics</a></li>
            <ul>
                <li><a href="#">USN</a></li>
                <ul>
                    <li><a href="#">Aclohol Incidents and Status Reports</a></li>
                    <ul>
                        <li><a href="#">Alcohol Incidents(By FY)</a></li>
                        <ul>
                            <li><a href="#">Fiscal Year</a></li>
                            <li><a href="#">Category</a></li>
                        </ul>
                        <li><a href="#">Alcohol Status Reports</a></li>
                    </ul>
                    <li><a href="#">Urinalysis Reports</a></li>
                    <li><a href="#">DAAR Listing</a></li>
                    <li><a href="#">Laboratory Positive Status Report</a></li>
                    <li><a href="#">Screening Listing</a></li>
                    <li><a href="#">Group Profile</a></li>
                    <ul>
                        <li><a href="#">With Details</a></li>
                        <li><a href="#">Without Details</a></li>
                    </ul>
                    <li><a href="#">Unit Profile</a></li>
                    <li><a href="#">ADMITS User and UIC Listings</a></li>
                    <ul>
                        <li><a href="#">ADMITS User Listing</a></li>
                        <li><a href="#">UIC Listing</a></li>
                    </ul>
                </ul>
                <li><a href="#">USMC</a></li>
                <li><a href="#">STAFF</a></li>
                <li><a href="#">DAPA/UPC</a></li>
            </ul>
            <li><a href="#">DAAR Data</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Edit Unit</a></li>
            <li><a href="#">Screening</a></li>
            <li><a href="#">Facility</a></li>
            <li><a href="#">Treatment</a></li>
            <li><a href="#">Waiver Data</a></li>
            <li><a href="#">New Report - Test</a></li>
            <li><a href="#">UIC Search</a></li>
            <li><a href="#">Spice</a></li>
            <li><a href="#">Breathalyzer</a></li>
        </ul>

关于为什么我的向下钻取菜单没有出现的任何想法？

更新

我应该提到这是一个 MVC4 应用程序，因此需要两组双引号。

更新 2

根据要求，我的页面源代码如下：

<head>
    <title>Home Page</title>
    <link href="/Content/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/base-admin.css" rel="stylesheet" type="text/css" />
    <link href="/Content/base-admin-responsive.css" rel="stylesheet" type="text/css" />
    <link href="/Content/fontAwesome/font-awesome.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/excanvas.min.js"></script>
    <script src="/Scripts/jquery.cookie.js"></script>
    <script runat="server" src="/Scripts/jquery.dcdrilldown.1.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#drilldown').dcDrilldown({
                speed: 'slow',
                saveState: true,
                showCount: false,
                linkType: 'breadcrumb'
            });
        });

    </script>
</head>

    <div class="pull-left span1">
        <ul id="drilldown">
            <li><a href="#">Record Check</a></li>
            <li><a href="#">Reports/Statistics</a></li>
            <ul>
                <li><a href="#">USN</a></li>
                <ul>
                    <li><a href="#">Aclohol Incidents and Status Reports</a></li>
                    <ul>
                        <li><a href="#">Alcohol Incidents(By FY)</a></li>
                        <ul>
                            <li><a href="#">Fiscal Year</a></li>
                            <li><a href="#">Category</a></li>
                        </ul>
                        <li><a href="#">Alcohol Status Reports</a></li>
                    </ul>
                    <li><a href="#">Urinalysis Reports</a></li>
                    <li><a href="#">DAAR Listing</a></li>
                    <li><a href="#">Laboratory Positive Status Report</a></li>
                    <li><a href="#">Screening Listing</a></li>
                    <li><a href="#">Group Profile</a></li>
                    <ul>
                        <li><a href="#">With Details</a></li>
                        <li><a href="#">Without Details</a></li>
                    </ul>
                    <li><a href="#">Unit Profile</a></li>
                    <li><a href="#">ADMITS User and UIC Listings</a></li>
                    <ul>
                        <li><a href="#">ADMITS User Listing</a></li>
                        <li><a href="#">UIC Listing</a></li>
                    </ul>
                </ul>
                <li><a href="#">USMC</a></li>
                <li><a href="#">STAFF</a></li>
                <li><a href="#">DAPA/UPC</a></li>
            </ul>
            <li><a href="#">DAAR Data</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Edit Unit</a></li>
            <li><a href="#">Screening</a></li>
            <li><a href="#">Facility</a></li>
            <li><a href="#">Treatment</a></li>
            <li><a href="#">Waiver Data</a></li>
            <li><a href="#">New Report - Test</a></li>
            <li><a href="#">UIC Search</a></li>
            <li><a href="#">Spice</a></li>
            <li><a href="#">Breathalyzer</a></li>
        </ul>
    </div>
4

1 回答 1

2

改变

<script src="@Url.Content("~/Scripts/jquery.cookie.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.dcdrilldown.1.2.min.js")"></script>

到

<script src="@Url.Content('~/Scripts/jquery.cookie.js')"></script>
<script src="@Url.Content('~/Scripts/jquery.dcdrilldown.1.2.min.js')"></script>

URL 周围的额外双引号从src属性引用字符串中分离出来。

更新：

好的，我想我看到了问题所在。您的 HTML 无效。元素的唯一直接子<ul>元素必须是<li>元素。您的嵌套<ul>元素需要在<li>标签内。看一看：

<!-- wrong -->
<ul>
    <li></li>
    <li></li>
    <ul>
        ...
    </ul>
</ul>

<!-- correct -->
<ul>
    <li></li>
    <li>
        <ul>
            ...
        </ul>
    </li>
</ul>

试试这个：

<ul id="drilldown">
    <li><a href="#">Record Check</a></li>
    <li><a href="#">Reports/Statistics</a>
        <ul>
            <li><a href="#">USN</a>
                <ul>
                    <li><a href="#">Aclohol Incidents and Status Reports</a>
                        <ul>
                            <li><a href="#">Alcohol Incidents(By FY)</a>
                                <ul>
                                    <li><a href="#">Fiscal Year</a></li>
                                    <li><a href="#">Category</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Alcohol Status Reports</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Urinalysis Reports</a></li>
                    <li><a href="#">DAAR Listing</a></li>
                    <li><a href="#">Laboratory Positive Status Report</a></li>
                    <li><a href="#">Screening Listing</a></li>
                    <li><a href="#">Group Profile</a>
                        <ul>
                            <li><a href="#">With Details</a></li>
                            <li><a href="#">Without Details</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Unit Profile</a></li>
                    <li><a href="#">ADMITS User and UIC Listings</a>
                        <ul>
                            <li><a href="#">ADMITS User Listing</a></li>
                            <li><a href="#">UIC Listing</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">USMC</a></li>
            <li><a href="#">STAFF</a></li>
            <li><a href="#">DAPA/UPC</a></li>
        </ul>
    </li>
    <li><a href="#">DAAR Data</a></li>
    <li><a href="#">Training</a></li>
    <li><a href="#">Edit Unit</a></li>
    <li><a href="#">Screening</a></li>
    <li><a href="#">Facility</a></li>
    <li><a href="#">Treatment</a></li>
    <li><a href="#">Waiver Data</a></li>
    <li><a href="#">New Report - Test</a></li>
    <li><a href="#">UIC Search</a></li>
    <li><a href="#">Spice</a></li>
    <li><a href="#">Breathalyzer</a></li>
</ul>
于 2013-03-15T13:32:28.200 回答