Скрыть и показать bootstrap timepickers на странице с помощью функции в application.js

Question

Я запускаю ASP.Net MVC Razor.

на вид клиента У меня есть несколько бутстрапов для выбора даты и времени. (начальные и конечные даты/время).

Когда я перебираю страницу, я хочу, чтобы droppicker отображался, когда я нахожусь в текстовом поле timepicker, а затем исчезаю, когда я убираюсь. Я добавил простую функцию application.js, чтобы проверить, нажата ли клавиша табуляции. Когда он будет нажат, он переключит выпадающее меню с видимого на скрытое. Это работает нормально, за исключением того, что когда я убираю второй таймер, в представлении отображаются оба меню выпадающего меню.

Для борьбы с этим я хотел захватить текущий элемент timepicker, когда он отображается, и отображать только это раскрывающееся меню. Я добавил следующий код в событие .on ("show.timepiacker".

Однако я не могу захватить текущий активный элемент timepicker, он всегда возвращается как неопределенный. Я пробовал много комбинаций, чтобы получить timepicker чтобы показать выпадающее меню, но ни одна из следующих работ.

ПРИМЕЧАНИЕ: Я хочу сделать это таким образом, поскольку у меня много страниц с большим количеством таймеров, поэтому я хочу глобальное решение, которое будет работать через файл application.js на в настоящее время активный 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

Хорошо, после того, как много возился я нашел решение. Я использовал .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"); 
     }); 
});