4

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

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

$('.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();
});
4

2 回答 2

3

您可以执行以下操作：

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

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

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

希望能帮助到你。

于 2014-07-18T11:09:59.577 回答
1

这个很麻烦。我在一些 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 元素，尽管此解决方案更为普遍，我会进行测试以确保它不会影响您代码中的其他区域。

于 2017-12-08T15:15:40.553 回答