4

我在一个 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 。确认！

4

1 回答 1

3

既然它是一个<select>元素，.focusout()就可以了。

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

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

如果它使用同一个类触发多个元素，你只需要一个更好的选择器。我注意到'.look'每个'.touch'. <td>您只能用于.siblings()在同一父级上查找元素<td>。

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

我也更新了小提琴

于 2013-11-01T06:18:36.300 回答