application.js의 함수를 사용하여 페이지에 부트 스트랩 시간대 표시 숨기기

Question

ASP.Net MVC 면도기를 실행 중입니다.

클라이언트보기에서 나는 여러 부트 스트랩 날짜 및 시간 선택기가 있습니다. (시작 및 종료 날짜/시간).

페이지를 통해 탭을 만들 때 시간 지정기 텍스트 상자 안에있을 때 시간 표시기 드롭 다운을 표시하고 탭을 해제하면 사라집니다. application.js에 탭 키가 눌러 졌는지 확인하는 간단한 함수를 추가했습니다. 이 버튼을 누르면 드롭 다운 메뉴가 표시에서 숨김으로 전환됩니다. 이 두 번째 timepicker 해제 탭을 제외하고이 괜찮습니다, 다음보기 드롭 다운 timepicker 메뉴를 모두 보여줍니다.

전투를 위해 나는 현재의 timepicker 요소가 표시 될 때이를 캡처하고 해당 드롭 다운 메뉴 만 표시하려고했습니다. .on ("show.timepiacker"이벤트에 다음 코드를 추가했습니다.)

그러나 현재 활성 상태 인 timepicker 요소를 캡처 할 수 없으며 항상 정의되지 않은 상태로 되돌아옵니다. 많은 조합을 사용하여 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

좋아, 해결책을 찾았습니다. 나는을 사용했습니다.210 메서드를 사용하여 드롭 다운 메뉴 개체의 $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"); 
     }); 
});