Fatal编程技术网
  • javascript/
  • Javascript 菜单导航不使用jquery日期选择器

Javascript 菜单导航不使用jquery日期选择器

javascript jquery css asp.net-mvc-4

Javascript 菜单导航不使用jquery日期选择器,javascript,jquery,css,asp.net-mvc-4,jquery-ui-datepicker,Javascript,Jquery,Css,Asp.net Mvc 4,Jquery Ui Datepicker,在我的MVC4 web应用程序中，我有一个数据库生成的带有子菜单项的菜单，在我没有实现jQueryDatePicker之前，它工作得很好当我加入datetimepicker.js和jqueryui包后，我的菜单就停止了使用。我曾尝试更改脚本和样式的顺序，但没有成功。我对css还比较陌生，所以我无法找出这里出了什么问题 以下是my_Layout.cshtml： <!DOCTYPE html> <html lang="en"> <head>

在我的MVC4 web应用程序中，我有一个数据库生成的带有子菜单项的菜单，在我没有实现jQueryDatePicker之前，它工作得很好当我加入datetimepicker.js和jqueryui包后，我的菜单就停止了使用。我曾尝试更改脚本和样式的顺序，但没有成功。我对css还比较陌生，所以我无法找出这里出了什么问题

以下是my_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>
这是数据库生成菜单的JQuery FIDLE：

(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);
型号：

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

public class LEAVE\u请求
{
[显示（Name=“Id”），必需，数据库生成（DatabaseGeneratedOption.None）]
公共长分配请求ID{get；set；}
[显示（Name=“请求日期”），必填]
公共可为空的请求\u日期{get；set；}
[显示（Name=“休假开始日期”），必填（ErrorMessage=“未输入休假开始日期”）]
[DataType（DataType.Date），DisplayFormat（DataFormatString=“{0:dd-mm-yyyy}”）]
公共可为空的休假开始日期{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>

@model TESTAPP.Models.LEAVE\u请求
@{
ViewBag.Title=“创建”；
}
@使用（Html.BeginForm（））{
@Html.AntiForgeryToken（）
请假
@LabelFor（model=>model.LEAVE\u START\u DATE）
@EditorFor（model=>model.LEAVE\u START\u DATE）
@Html.ValidationMessageFor（model=>model.LEAVE\u START\u DATE，“*”）
@Html.ValidationSummary（false）



}
@ActionLink（“返回列表”、“索引”）
我真的很感谢你们的帮助。谢谢，我终于解决了我的问题。我认为JQuery包与我用于菜单导航的js文件存在冲突。我只使用jquery-1.8.2.min.js，而不是渲染整个包。现在，它的工作如预期。但是，我仍然无法找到与以下内容的冲突：（

您已经包含了两次
jquery ui-{version}.js
（在布局中使用
@Scripts.Render（“~/bundles/jqueryui”）
，在视图中再次使用
。删除视图中的一个。不幸的是，这没有任何区别：（.我仍然无法获取datepicker你说的无法获取datepicker是什么意思-你的问题是为什么你的菜单脚本停止工作。你发布了这么多不相关的代码，很难想象有人会涉猎所有内容-我甚至可以看到任何与使用datepicker脚本相关的代码抱歉，让人搞混了描述实际的问题是，当我将`@Scripts.Render（“~/bundles/jquery”）`放在head部分时，菜单导航不起作用，但datepicker起作用。但要使菜单起作用，我需要将它放在script Render部分的上方，然后我就不会得到datepicker。查找任何控制台错误 
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; }
}

@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>