Question

我有一个插件可以更改所有浏览器上select html标记的外观。

我正在尝试使新样式的元素集表现得像普通的select标记。我几乎就在那里，但我只需要弄清楚一件事，那就是如何隐藏焦点ul。

首先，这是一个新的选择元素的演示（不是英文，但你可以很容易地找到^^）： http://mahersalam.co.cc/projects/n-beta/

如果单击select元素的切换按钮，然后单击“离开”，则具有选项的ul元素将不会消失。那是因为我无法在focusout上发起ul事件。

以下是控制事件处理方式的代码：

// 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

试用jQuery outside events plugin 会让你做类似的事情：

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

Answer 2

我可以使用以下代码隐藏选项面板：

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

这很有效，因为专注于其他输入就像点击document一样。

如何在ul元素上触发focusout事件？

2 个答案: