Html 删除下拉菜单的自动加载

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

我的代码是这样的

<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创建了一个日历。所有的事情都正常工作，但问题是它在启动时自动加载，这使我的网站看起来很糟糕。我需要将其设置为仅在单击文本框时显示

很抱歉问了这个简单的问题，但我不知道问题出在哪里。请帮助我。如果您将

数据切换

属性设置为

下拉列表

，它将始终在页面加载时显示列表内容。我建议您使用

collapse

而不是

dropdown

来查看更改。然后你就可以做了

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

$（函数（）{
$（“#日期选择器”）。日期选择器（{
自动关闭：是的，
今天的亮点：真的
}).datepicker（'update'，new Date（））；；
});
#日期选择器{宽度：180px；边距：0 20px 20px 20px；}
#datepicker>span:hover{cursor:pointer；}

您可以尝试以下代码：

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

所以，您可以单击datepicker显示

我已将代码更改为

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






函数showmydiv（）{
document.getElementById（'showDates'）.style.display=“block”；
}

这一个工作正常
感谢您的回复，但它对meI不起作用我不太了解引导，但我认为问题在于这一部分
在删除页面上加载的文本框后。如果你对此有任何想法，请帮助我这对我来说是一个大问题me@RemyaR将类类型改为“折叠”而不是“下拉菜单”。有时Bootsrap很棘手。如果这没有帮助，看看这个例子，如果你有任何问题，请告诉我：（）但我需要这个作为下拉列表。我的页面有很多部分。倒塌使人难看。对不起。@RemyaR请检查上面的编辑。尽我所能。祝您有个美好的一天！谢谢你努力帮助我