Question

我想在下拉菜单中添加一个日期选择器。我使用这个日期选择器link

接下来，当我点击输入选择日期时，我添加了代码以不关闭菜单，输入消失。我该如何解决？

$('.datepicker').datepicker({
    autoclose: true
});

$('.dropdown-toggle').dropdown();
$('.jsolr-search-result-form .dropdown input, .jsolr-search-result-form .dropdown label, .jsolr-search-result-form ul span').click(function(e) {
  e.stopPropagation();
});

Answer 1

您可以执行以下操作：

jQuery(function($){
    $('#dropdownMenu1').parent().on('hide.bs.dropdown', function(e){
        e.preventDefault();
    });
});

示例：http://jsfiddle.net/9qyf2/

请注意，父元素会触发下拉事件。从那里开始，您可以检查已单击的元素，并在需要时阻止默认行为。确保检查js组件上的bootstrap文档：http://getbootstrap.com/javascript/#dropdowns-usage

希望它有所帮助。

Answer 2

这个非常麻烦。我还在一些Bootstrap下拉菜单中有几个日期选择器。我用两种方法解决了这个问题。

第一个使用jQuery来阻止事件在点击DatePicker时冒泡一次

$('.yourDatePicker').on('hide', function(event) {
    event.stopPropagation();
    $(this).closest('.yourDropDown').one('hide.bs.dropdown', function(ev) {
        return false;
    });
});

另一个更为永久的解决方案是更改datepicker.js文件本身，但听起来你正在使用datepicker cdn。如果你可以下载并在本地使用它，你可以打开它，你会发现看起来像这样的代码

click: function(e){
    e.preventDefault();
    var target = $(e.target).closest('span, td, th'),
        year, month, day;
    if (target.length === 1){
        switch (target[0].nodeName.toLowerCase()){
...ect...

如果你在这个区域添加一个e.stopPropagation（）函数，就像这个

click: function(e){
    e.preventDefault();
    e.stopPropagation(); // <-- add this
    var target = $(e.target).closest('span, td, th'),
        year, month, day;
    if (target.length === 1){
        switch (target[0].nodeName.toLowerCase()){

你的日期选择器会停止干扰你的其他DOM元素，虽然这个解决方案更广泛，我会测试以确保它不会影响代码中的其他区域。

下拉菜单中的Twitter日期选择器

2 个答案: