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>

before click it's just text

单击“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>

after clicking sales the drop down appears

这是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类也被触摸，这有点古怪。 ACK！

Answer 1

由于它是<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();
    });
});

我已经更新了fiddle

jquery show使用选择框/下拉列表隐藏问题

1 个答案: