菜单导航无法使用jquery datepicker

时间：2016-01-13 09:36:46

标签： javascript jquery css asp.net-mvc-4 jquery-ui-datepicker

我的MVC4 Web应用程序中有子菜单项的数据库生成菜单，在我没有实现Jquery datepicker之前工作正常。 一旦我包含了datetimepicker.js和jqueryui包，我的菜单就停止了消费。我曾试图改变脚本和样式的顺序，但没有成功。我对CSS很新，所以我无法弄清楚这里出了什么问题。

这是我的_Layout.cshtml：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="~/Images/Company-logo/logo.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jqueryui") 
        @Styles.Render("~/Content/themes/base/css","~/Content/themes/base", "~/Content/css")
        <script src="~/Scripts/DatePickerReady.js"></script>
        <link href="~/Content/indexView.css" rel="stylesheet" />
    </head>
    <body>
        <header>
            <div>
                <img src="~/Images/Company-logo/header_bar.png" style="width:100%"/>
            </div>

            <div class="content-wrapper">
                <div class="float-right">
                    @Html.Partial("Menu")
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>

        </footer>

        <script src="@Url.Content("~/Scripts/dbGeneratedMenu.js")" type="text/javascript"></script>
        <link href="@Url.Content("~/Content/dbGeneratedMenu.css")" rel="stylesheet" type="text/css" />
        @RenderSection("scripts", required: false)
    </body>

    <script type="text/javascript">
        $m = jQuery.noConflict();
        $m(document).ready(function () {
            $m('.menu').dbGeneratedMenu();
        });
    </script>
</html>

以下是我的菜单css：

.menu, .menu ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
    line-height: 2.5em;
}
.menu a
{
    text-decoration: none;
}
.menu > li
{
    margin-left: 15px;
}
.menu > li:first
{
    margin-left:0px!important;
}
.menu > li > a
{
    padding: 0px 10px;
    margin: 0;
    width: 100%;
    text-decoration: none;
    color: #005D7C;
    font-weight: bold;
}
div.box
{
    position: absolute;
    z-index: -1;
    background-color: #75CDD2;
    left: 0;
    top: 0;
    border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
}
li.pull-down
{
    padding-right:6px;
}
li.pull-down > a
{
    background-image: url(/Images/menu/darrow.png);
    background-position: 96% 75%;
    background-repeat: no-repeat;
    padding-right: 20px;
}
li.right-menu > a
{
    background-image: url(/Images/menu/rarrow.png);
    background-position: 97% 45%;
    background-repeat: no-repeat;
}
.menu a.selected
{
    background-color: #75CDD2;
    border-radius: 0px 4px 4px 4px;
    -moz-border-radius: 0px 4px 4px 4px;
    -webkit-border-radius: 0px 4px 4px 4px;
}
.menu li
{
    float: left;
    position: relative;
}

.menu ul
{
    position: absolute;
    display: none;
    width: 200px;
    top: 2.5em; /*padding-right: 10px;*/
    background-color: #B8C402; /*-moz-opacity: .50;     filter: alpha(opacity=50);     opacity: .50;*/
    border-radius: 0px 4px 4px 4px;
    -moz-border-radius: 0px 4px 4px 4px;
    -webkit-border-radius: 0px 4px 4px 4px;
}

.menu li ul a
{
    width: 180px;
    height: auto;
    float: left;
    color: #FFFFFF;
    padding: 0 10px;
}
.menu li ul li
{
    padding: 0;
    margin: 0;
}
.menu ul ul
{
    top: auto;
}

.menu li ul ul
{
    left: 198px; /*margin: 0px 0 0 10px;*/
}
.menu-item-selected > a
{
    background-color: #000000;
    -moz-opacity: .50;
    filter: alpha(opacity=50);
    opacity: .50;
    font-weight: bold;
}
a:hover {
    background-color: #B8C402;
    color: #FFFFFF !important;
}
.menu-item-selected > a:hover
{
    background-color: #000000;
    color: #FFFFFF !important;
}

这是数据库生成菜单的JQuery小提琴：

(function ($) {
    $.fn.extend({
        dbGeneratedMenu: function () {
            return this.each(function () {
                //add class .drop-down to all of the menus having drop-down items
                var menu = $(this);
                var timeoutInterval;
                if (!menu.hasClass('menu')) menu.addClass('menu');
                $("> li", menu).each(function () {
                    if ($(this).find("ul:first").length > 0)
                        $(this).addClass('pull-down');
                });

                $("> li ul li ul", menu).each(function () {
                    $(this).parent().addClass('right-menu');
                });
                $("li", menu).mouseenter(function () {
                    var isTopLevel = false;
                    //if its top level then add animation 
                    isTopLevel = $(this).parent().attr('class') === 'menu';
                    if (isTopLevel) {
                        clearTimeout(timeoutInterval);
                        var w = $(this).outerWidth();
                        // if ($(this).hasClass('pull-down')) w += 10;
                        var h = $(this).outerHeight();
                        var box = $('<div/>').addClass('box');
                        $('> li', menu).removeClass('selected');
                        $('>li div.box', menu).remove();
                        $('>li ul', menu).css('display', 'none').slideUp(0);
                        $(this).prepend(box);
                        $(this).addClass('selected');
                        box.stop(true, false).animate({ width: w, height: h }, 100, function () {
                            if ($(this).parent().find('ul:first').length == 0) {
                                timeoutInterval = setTimeout(function () {
                                    box.stop(true, false).animate({ height: '+=5' }, 300, function () {
                                        box.parent().find('ul:first').css('display', 'block').css('top', box.height()).stop(true, false).slideDown(100);
                                    });
                                }, 10);
                            }
                            else {

                                timeoutInterval = setTimeout(function () {
                                    box.stop(true, false).animate({ height: '+=0' }, 0, function () {
                                        box.parent().find('ul:first').css('display', 'block').css('top', box.height()).stop(true, false).slideDown(100);
                                    });
                                }, 10);
                            }
                        });
                    }
                    else {
                        $(this).find('ul:first').css('display','block').stop(true, false).slideDown(100);
                    }

                }).mouseleave(function () {
                    isTopLevel = $(this).parent().attr('class') === 'menu';
                    if (isTopLevel) {
                        $(this).parent().find('div.box').remove();
                    }
                    $(this).find('ul').slideUp(100, function () {

                        $(this).css('display', 'none');
                    });
                });

                $('> li > ul li a', menu).hover(function () {
                    $(this).parent().addClass('menu-item-selected');
                }, function () {

                    $(this).parent().removeClass('menu-item-selected');
                });

            });
        }
    });
})(jQuery);

日期的部分视图：

@model DateTime?
@{
    var value = "";
    if (Model.HasValue) {
        value = String.Format("{0:d}", Model.Value.ToString("dd-MM-yyyy"));
    }
}
@Html.TextBox("", value, new { @class = "datefield", type = "date" })

模型：

public class LEAVE_REQUEST
{
    [Display(Name = "Id"), Required, DatabaseGenerated(DatabaseGeneratedOption.None)]
    public long ALLOTMENT_REQUEST_ID { get; set; }

    [Display(Name = "Request date"), Required]
    public Nullable<System.DateTime> REQUEST_DATE { get; set; }

    [Display(Name = "Leave start date"), Required(ErrorMessage="Leave start date not entered")]
    [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd-mm-yyyy}")]
    public Nullable<System.DateTime> LEAVE_START_DATE { get; set; }
}

查看我正在实施datetimepicker的位置

@model TESTAPP.Models.LEAVE_REQUEST
@{
    ViewBag.Title = "Create";
}
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()

    <fieldset>
        <legend>LEAVE_REQUEST</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.LEAVE_START_DATE)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LEAVE_START_DATE)
            @Html.ValidationMessageFor(model => model.LEAVE_START_DATE, "*")
        </div>

        @Html.ValidationSummary(false)
        <p>
            <input type="submit" value="Submit" class="submitButton"/>
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

我真的很感谢你们的任何帮助。感谢

1 个答案:

答案 0 :(得分：0)

我终于解决了我的问题。我认为JQuery包中的东西与我用于菜单导航的js文件有冲突。我只使用jquery-1.8.2.min.js而不是渲染整个bundle。现在它按预期工作了。但是，我仍然无法找到与什么冲突:(

相关问题
最新问题