jquery使用选择框/下拉菜单显示隐藏问题

Question

我在 div 中有一个单词。这是下拉菜单的一部分，但下拉菜单是隐藏的，现在具体关注的是“DC”……在下图中，我们正在查看销售情况：

HTML：

<td class="edit">
<select class="touch" style="display: none;">
<option value="11">Rebuying</option><option value="12">Sales</option></select>
<span class="look">DC</span>
</td>

单击“DC”一词后，将出现一个下拉选择。注意类从编辑变为编辑。

<td class="editing" data-oldvalue="13">
<select class="touch" style="display: inline-block;">
<option value="11">Rebuying</option><option value="12">Sales</option></select>
<span class="look" style="display: none;">DC</span>
</td>

这是show() hide() 的函数：

//allow flipping between "look" and "touch" mode for all editable fields
        $('td.edit' + suffix).click(function(event) {
            //make this the only TD in "editing" mode
            event.preventDefault();
            back_to_look();        
            td_to_touch($(this));
        });

        var mouse_is_inside = false;

        $(document).ready(function()
        {
            $('td.edit').hover(function(){ 
                mouse_is_inside=true; 
            }, function(){ 
                mouse_is_inside=false; 
            });

            $("body").click(function(){ 
                if(! mouse_is_inside) $('.touch').hide();
                back_to_look();
            });
        });

function back_to_look() {
    $('td.editing ,td.edit.new').each(function() {
        $(this).children('.look').show();
        $(this).children('.touch').hide();
        if (!$(this).hasClass('edit')) {
            $(this).addClass('edit');
        }
        if ($(this).hasClass('editing')) {
            $(this).removeClass('editing');
        }
    });
}

function td_to_touch(td) {
    var theTouch = td.children('.touch');
    var theLook = td.children('.look');
    var oldVal = theLook.text().trim();

    td.addClass('editing');
    td.removeClass('edit');
    theLook.hide();
    theTouch.show();

    //save the existing value so it can be compared to when the "change" event is fired on the element
    td.attr('data-oldvalue', theTouch.val());

    if (theTouch.is('select')) {        
        theTouch.children('option:contains(' + oldVal + ')').attr('selected', 'selected');
    } else {
        theTouch.val(oldVal);
    }
}   

第一部分工作正常，当我点击“DC”这个词时，下拉菜单出现......当我在 div 外部点击回到正文时，它会隐藏起来。这很好用，问题是当下拉选择框显示并且我单击它进行选择时，它会在我做出选择之前消失，因为我正在使用mouseup() 函数。

我需要人们能够做出选择，然后当他们在 div 之外单击时，它就会消失。

我尝试过使用 .live、on(click, function()) 以及几乎所有内容。请任何帮助将不胜感激。谢谢。

概要：下拉菜单不会保持打开状态，因此我可以进行选择，因为我正在使用 mouseup()。

现在，当我单击文本时，它会触发下拉菜单，并且日期选择器也会随机弹出。

 <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_est_date(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_due_date(); ?>
                        </span>
                    </td>
                    <td class="edit">
                        <input type="text" class="touch dtpick">
                        </input>
                        <span class="look">
                            <?php echo $project->get_next_date(); ?>
                        </span>
                    </td>

这有点古怪，因为 dtpick 类也是 touch。确认！

Answer 1

因为它是一个<select> 元素，所以.focusout() 就可以了。

$('.look').click(function(){
    $(this).hide();
    $('.touch').show().focus();
});

$('.touch').focusout(function(){
   $(this).hide();
   $('.look').show();
});

---

如果它触发多个具有相同类的元素，你只需要一个更好的选择器。我注意到每个<td> 都有一组'.look' 和'.touch'。您可以使用 .siblings() 仅在同一父 <td> 上查找元素。

$('.look').click(function(){
    $(this).hide();
    $(this).siblings('.touch').show().focus().focusout(function(){
        $(this).hide();
        $(this).siblings('.look').show();
    });
});

我也更新了fiddle