jquery show使用选择框/下拉列表隐藏问题 [英] jquery show hide problems using a select box/dropdown

问题描述

我在div里面有一个词。这是下拉的一部分，但是下拉是隐藏的，特别关注的是现在的DC...在下面的图片中看着销售：

I have a word inside of a div. that's part of a drop down but the drop down is hidden, the specific focus is on "DC" right now... in the image below were looking at sales:

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后，会出现一个下拉选择。请注意，课程从编辑更改为编辑。

After you click on the word "DC" a drop down select appears. Notice the class changed from edit to editing.

<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（） function。

The first part works okay, when i click on the word "DC" the drop down appears... and when i click outside the div back into the body it hides. That works fairly good, the problem is when the drop down select box is showing and i click on it to make a selection it disappears before i can make my selection because i'm using the mouseup() function.

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

I need people to be able to make a selection and than after that when they click outside of the div it disappears.

我尝试使用.live，on（click，function（））以及几乎所有内容。如有任何帮助，将不胜感激。谢谢。

I've tried using .live, on(click, function()) and just about everything. Please any help would be greatly appreciated. Thank you.

大纲：下拉列表不会保持打开状态，因此我可以选择，因为我正在使用mouseup（）。

SYNOPSIS: The drop down won't stay open so i can make a selection because i'm using mouseup().

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

Now, when i click on the text it's firing for both the drop down and the datepicker randomly pops up too.

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

It's being a bit quirky because of the dtpick class being touch as well. ack!

推荐答案

因为它是< select> 元素， .focusout（）会做得很好。

Since it is a <select> element, .focusout() will do just fine.

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

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

---

如果它使用相同的类触发多个元素，你只需要一个更好的选择器。我注意到有'的设置。看看'和'。触摸'每个< ; TD> 。您可以使用 .siblings（）仅在同一父< td> 上查找元素。

---

If it's firing multiple element with the same class, you just need a better selector. I noticed there are set of '.look' and '.touch' for each <td>. You can use .siblings() to find the element on the same parent <td> only.

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

我已经更新了小提琴以及

这篇关于jquery show使用选择框/下拉列表隐藏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！