ul要素でfocusoutイベントをトリガする方法は？

Question

すべてのブラウザでselect htmlタグの外観を変更するプラグインがあります。

新しいスタイルの要素セットを通常のselectタグのように動作させようとしています。私はほとんどそこにいますが、私はただ一つのことを理解する必要があり、それはフォーカスを外にulを隠す方法です。その後、 http://mahersalam.co.cc/projects/n-beta/

あなたはselect要素のトグルボタンをクリックした場合、および：

まず第一に、ここに新しいselect要素のデモである（ない英語では、しかし、あなたは^^簡単にそれを見つけることができます）クリックすると、オプションを持つ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; 
     } 
    }) 

全体のコードはデモから見ることができます。ご覧のとおり、私はすでに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(); 
});