使用 application.js 中的函数在页面上隐藏和显示引导时间选择器答案

【问题标题】：Hide and show bootstrap timepickers on page by using function in application.js使用 application.js 中的函数在页面上隐藏和显示引导时间选择器
【发布时间】：2016-11-30 12:12:18
【问题描述】：

我正在运行 ASP.Net MVC Razor。

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

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

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

但是，我似乎无法捕获当前活动的时间选择器元素，它总是以未定义的形式返回。我尝试了很多组合来让时间选择器显示下拉菜单，但以下都不起作用。

注意：我想这样做，因为我有很多页面有很多时间选择器，所以我想要一个全局解决方案，它可以通过当前活动时间选择器上的 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");


        });
});

【问题讨论】：

标签： jquery asp.net-mvc timepicker

【解决方案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");
        });
});

【讨论】：