使用 application.js 中的函数在页面上隐藏和显示 bootstrap 个时间选择器

Question

我是运行 ASP.Net MVC 剃刀。

在客户端视图中，我有多个 bootstrap 日期和时间选择器。（开始和结束 dates/times）。

当我在页面中切换时，我希望时间选择器下拉列表在我位于时间选择器文本框内时出现，然后在我关闭时消失。我在 application.js 中添加了一个简单的函数来检查何时按下了 Tab 键。按下时，它将下拉菜单从可见切换为隐藏。这工作正常，除了当我关闭第二个时间选择器时，视图然后显示两个下拉时间选择器菜单。

为了解决这个问题，我想在显示当前时间选择器元素时捕获它，并且只显示该下拉菜单。我将以下代码添加到 .on("show.timepiacker" 事件。

但是，我似乎无法捕获当前活动的时间选择器元素，它总是返回为未定义。我尝试了很多组合来让时间选择器显示下拉列表，但是 none 以下工作。

注意：我想这样做，因为我有很多页面有很多时间选择器，所以我想要一个全局解决方案，它将通过当前活动时间选择器

上的application.js文件工作

    $(function () {
    $(".bootstrap-timepicker")
        .on("keydown",
            function(e) {

                if (e.keyCode == 9) {
                    $(".bootstrap-timepicker .dropdown-menu").css("visibility", "hidden");
                } else {
                    $(".bootstrap-timepicker .dropdown-menu").css("visibility", "visible");
                }
            })
            .on("show.timepicker",
            function (e) {

    // i've tried the following:
    e.currentTarget.dropdown.css("visibility", "visible");


    //and
    $(".bootstrap-timepicker .dropdown-menu").css("visibility", "visible");

    //and
    $(this).dropdown.css("visibility", "visible");

    //and
    var elem = $(this);
    elem.css("visibility", "visible");

    //and
    $(document.activeElement).dropdown.css("visibility", "visible");

    //and
    $(e.target).timepicker.dropdown.css("visibility", "visible");

    //and 
    var $focused = $(":focus");
    $focused.css("visibility", "visible");

    //and
    var timepickerZ = e.target;
    timepickerZ.css("visibility", "visible");


        });
});

Answer 1

好的，经过一番折腾，我找到了解决方案。我使用 .children 方法在 $this 元素中搜索下拉菜单对象，然后对其应用 css 更改。关于这种类型的操作应该有更清晰的文档，我找到的所有示例都非常简单。

$(function () {
    $(".bootstrap-timepicker")
        .on("keydown",
            function(e) {

                if (e.keyCode == 9) {
                    $(".bootstrap-timepicker .dropdown-menu").css("visibility", "hidden");
                } else {
                    $(".bootstrap-timepicker .dropdown-menu").css("visibility", "visible");
                }
            })
            .on("show.timepicker", function (e) {
                $(this).children(".dropdown-menu").css("visibility", "visible");
        });
});

使用 application.js 中的函数在页面上隐藏和显示 bootstrap 个时间选择器

Hide and show bootstrap timepickers on page by using function in application.js

asp.net-mvc

jquery

timepicker