Question

我正在运行ASP.Net MVC Razor。

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

当我在页面中进行选项卡时，我希望当我在timepicker文本框内时显示timepicker下拉列表，然后当我关闭时消失。我在application.js中添加了一个简单的函数来检查按Tab键的时间。按下它时，它会将下拉菜单从可见变为隐藏。这样做没问题，除了当我选中第二个时间戳时，视图会显示两个下拉时间选择器菜单。

为了解决这个问题，我想在显示时捕获当前的timepicker元素，并仅显示下拉菜单。我将以下代码添加到.on（＆＃34; show.timepiacker＆＃34; event。

但是，我似乎无法捕获当前活动的timepicker元素，它总是以未定义的形式返回。我尝试了很多组合来获取时间戳来显示下拉列表，但以下都没有工作。

注意：我想这样做，因为我有许多带有许多时间选择器的页面，因此我想要一个全局解决方案，它将通过当前活动时间选择器上的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 timepickers

1 个答案: