ul 요소에서 focusout 이벤트를 트리거하는 방법은 무엇입니까?

Question

모든 브라우저에서 select HTML 태그 모양을 변경하는 플러그인이 있습니다.

새로운 스타일 집합 요소를 보통의 select 태그처럼 동작 시키려고합니다. 나는 거의 다 왔지만 한 가지만 알아 내면됩니다. 초점을 맞추기 위해 ul을 숨기는 방법입니다.

우선, 여기에 새로운 선택 요소의 데모입니다 (하지 영어,하지만 당신은 ^^ 쉽게 찾을 수 있습니다) : 다음 선택 요소의 토글 버튼을 클릭하면 http://mahersalam.co.cc/projects/n-beta/

하고, 클릭 만하면 옵션이있는 ul 요소가 사라지지 않습니다. 그게 ul에 focusout 이벤트를 발생시킬 수 없기 때문입니다.

// Make a div which will be used offline and then inserted to the DOM 
$namodgSelect = $('<div class="namodg-select"></div>'); 

/* other stuff ... */ 

$namodgSelect // Handle all needed events from the wrapper 
    .delegate('a', 'click focus blur', function(e) { 

     // Type of the event 
     var type = e.type, 

     // Declare other vars 
      id, 
      $this; 

     e.preventDefault(); // Stop default action 

     // Make an id ot the element using it's tag name and it's class name 
     // Note: Because we add a class on the active toggler, it's easier to remove it from here and the logic will still work 
     id = e.target.tagName.toLowerCase() + '.' + e.target.className.replace(' toggler-active', ''); 

     switch (id) { 

      case 'p.selected': case 'div.toggle-button': 

       // Only accept 'click' on p and div 
       if (type != 'click') { 
        return; 
       } 

       // Show and hide the options holder 
       if ($optionsHolder.data('hidden')) { 

        $selectElem.focus(); 

        // This needs to run fast to give feedback to the user 
        $toggler.addClass('toggler-active').data('active', true); 

        // Show the options div 
        $optionsHolder.stop(true, true).slideDown('fast', function() { 

         // Sometimes fast clicking makes the toggler deavtive, so show it in that case 
         if (! $toggler.data('active')) { 
          $toggler.addClass('toggler-active').data('active', true); 
         } 

        }).data('hidden', false); 

       } else { 

        $selectElem.blur(); 

        // Hide the options div 
        $optionsHolder.stop(true, true).slideUp(function() { 

         // Only hide the toggler if it's active 
         if ($toggler.data('active')) { 
          $toggler.removeClass('toggler-active').data('active', false); 
         } 

        }).data('hidden', true); 

       } 
       break; 

      case 'a.toggler': 
       switch (type) { 
        case 'focusin': 
         $selectElem.focus(); 
         break; 
        case 'focusout': 
         // Only blur when the options div is deactive 
         if ($optionsHolder.data('hidden')) { 
          $selectElem.blur(); 
         } 
         break; 
        case 'click': 
         $selectedHolder.click(); 
         $selectElem.focus(); 
       } 
       break; 

      case 'a.option': 
       // Stop accept click events 
       if (type != 'click') { 
        return; 
       } 

       // cache this element 
       $this = $(this); 

       // Change the value of the selected option and trigger a change event 
       $selectedOption.val($this.data('value')).change(); 

       // Change the text of the fake select and trigger a click on it 
       $selectedHolder.text($this.text()).click(); 
       break; 
     } 
    }) 

전체 코드

데모에서 볼 수있다 : 여기

는 이벤트를 처리하는 방법을 제어하는 ​​코드입니다. 보시다시피, 나는 이미 toggler 및 옵션에 focusout 이벤트를 사용하고 있으므로, 그럴 경우 (기능이 사용 중지됨) ul을 숨길 수 없습니다.

누구든지이 문제를 해결할 수 있다면 감사하겠습니다. 감사.

Answer 1

이 코드를 사용하여 옵션 패널을 숨길 수 있었다 : 다른 입력에 집중하기 때문에

$(document).click(function() { 
    if ($optionsHolder.data('hidden') || $optionsHolder.is(':animated')) { 
     return; 
    } 
    $selectedHolder.click(); 
}) 

이 작동을 document을 클릭하십시오.

Answer 2

알아보십시오 jQuery outside events plugin 당신이 그런 짓을 할 것인가 :

$(this).bind("clickoutside", function(event){ 
    $(this).hide(); 
});