Question

我创建了一个菜单，当我将鼠标悬停在菜单上时会出现菜单列表，并且我必须创建一个datepicker.My程序工作正常，但是，现在我需要选择一个日期选择器从菜单中创建datepicker中的日期，现在出现问题，当我来到datepicker时，菜单正在消失。我在这里粘贴我的代码。

 <!DOCTYPE html>
<html>
<head>
<title>Demo Drop Down Responsive Menu with CSS/jQuery</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="demo.css" media="all" />
<!-- jQuery lib from google server ===================== -->
<script src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<!--  javaScript -->
  <script>  
 <!--  // building select nav for mobile width only -->

 $(function(){
// building select menu
$('<select />').appendTo('nav');

// building an option for select menu
$('<option />', {
    'selected': 'selected',
    'value' : '',
    'text': 'Choise Page...'
}).appendTo('nav select');

$('nav ul li a').each(function(){
    var target = $(this);

    $('<option />', {
        'value' : target.attr('href'),
        'text': target.text()
    }).appendTo('nav select');

});

    // on clicking on link
    $('nav select').on('change',function(){
    window.location = $(this).find('option:selected').val();
});
});

// show and hide sub menu
 $(function(){
$('nav ul li').hover(
    function () {
        //show its submenu
         $('ul', this).slideDown(150);
    }, 
       function () {
        //hide its submenu
        $('ul', this).slideUp(150);         
    }
);
});
//end

$(function() {
$( "#datepicker" ).datepicker();
  });

$(function() {
$( "#datepicker1" ).datepicker();
 });
</script>
<!-- end -->
</head>
<body>
<div class="container">
<header>
    <div id="fdw">
            <!--nav-->
                <nav>
                    <ul>
                        <li class="current"><a href="#">Custom<span class="arrow"></span></a>
                            <ul style="display: none;" class="sub_menu">
                                <li class="arrow_top"></li>
                                <li><a class="subCurrent" href="#">
                                <input type="text" name="from" id="datepicker" size="10">
                                <input type="text" id="datepicker1" name="to" size="10"></a>
                                </li>

                            </ul>
                        </li>
                        <li><a href="#">Last<span class="arrow"></span></a></li>
                        <li><a href="#">This<span class="arrow"></span></a></li>
                        <li>
                            <a href="#">To Date<span class="arrow"></span></a>
                            <ul style="display: none;" class="sub_menu">
                                <li class="arrow_top"></li>
                                <li><a href="#">Portfolio 3 </a></li>
                                <li><a href="#">Portfolio 4 </a></li>
                                <li><a href="#">Portfolio Single</a></li>
                                <li><a href="#">Portfolio Two</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="http://www.freshdesignweb.com">Trailing<span class="arrow"></span></a>
                            <ul style="display: none;" class="sub_menu">
                                <li class="arrow_top"></li>
                                <li><a href="#">Design</a></li>
                                <li><a href="#">HTML5</a></li>
                                <li><a href="#">CSS3</a>
                                </li><li><a href="#">jQuery</a></li>
                            </ul>
                        </li>
                        <li><a href="#">contact<span class="arrow"></span></a></li>
                    </ul>
                </nav>
    </div><!-- end fdw -->
</header><!-- end header -->

</div>
</body>
</html>

我想在菜单中离开时保留菜单中的日期选择器。这是我现在使用的html粘贴生成菜单屏幕。 enter image description here

我已经粘贴了两种情况，请有人帮忙

将鼠标悬停在从菜单创建的jQuery日期选择器上时，菜单正在消失

0 个答案: