Question

在我的页面中，我将日历设置为下拉列表，但会在启动时自动加载

我的代码就像这样

<li class="dropdown"> 
<input type="text" class="form-control dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" name="txtEnds" id="txtEnds" required >
    <ul class="dropdown-menu" style="display:none;">
        <li><div id="showDates"></div></li>
    </ul>
</li>

使用showdates id我创建了一个日历。所有东西都正常工作但问题是它在启动时自动加载它对我的网站造成了不好的表现。我需要将其设置为仅在单击文本框时显示它

对不起这个简单的问题，但我不知道它有什么问题请帮帮我

Answer 1

~~如果将data-toggle属性设置为dropdown，它将始终在页面加载时显示列表内容。我建议您使用collapse代替dropdown并查看更改。然后你可以继续工作。~~

忘了一切。这是一份工作日历。

＆＃13;

$(function () {
  $("#datepicker").datepicker({ 
        autoclose: true, 
        todayHighlight: true
  }).datepicker('update', new Date());;
});

＆＃13;

#datepicker{width:180px; margin: 0 20px 20px 20px;}
#datepicker > span:hover{cursor: pointer;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
    <input class="form-control" type="text" readonly />
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

＆＃13;

你去...工作正常，并在引导程序。这有几百个版本。

Answer 2

您可以尝试以下代码：

$(document).ready(function() { 
   $('.dropdown-menu').hide();
});

所以，然后你可以点击datepicker。

Answer 3

我已将代码更改为

<li class="dropdown"> 
<input type="text" class="form-control dropdown-toggle" data-toggle="dropdown"   data-hover="dropdown" name="txtEnds" id="txtEnds" required onclick="showmydiv();">
<ul class="dropdown-menu" >
    <li><div id="showDates" style="display:none;"></div></li>
</ul>
</li>

<script>
    function showmydiv(){
       document.getElementById('showDates').style.display = "block";
      }
</script>

这个工作正常

删除下拉菜单的自动加载

3 个答案: