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

Question

I'm running ASP.Net MVC Razor.

on a client view i have multiple bootstrap date and time pickers. (start and end dates/times).

When I tab through the page I want the timepicker drop down to appear when I am inside the timepicker text box, and then disappear when I tab off. I have added a simple function to application.js to check when the tab key is pressed. When it is pressed it will toggle the dropdown menu from visible to hidden. This works okay, except for when I tab off the second timepicker, the view then shows both dropdown timepicker menus.

TO combat this I wanted to capture the current timepicker element when it is shown and only show that dropdown menu. I added the following code to the .on("show.timepiacker" event.

However, I cannot seem to capture the currently active timepicker element, it always comes back as undefined. I tried lots of combinations to get the timepicker to show the dropdown, but none of the following work.

NOTE: I want to do it this way as I have many pages with many timepickers so I want a global solution which will work through the application.js file on the currently active timepicker

    $(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

Okay, after much fiddling I found the solution. I used the .children method to search the $this element for a dropdown menu object and then applied the css change to it there. There should be much clearer docs regarding this type of operation, all the examples I found were quite simplistic.

$(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");
        });
});