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

我有一个字里面的一个div。这是一个下拉列表的一部分，但下拉列表是隐藏的，具体的重点是“直流”现在。。。在下图中，我们查看了销售情况：

HTML:

第一部分工作正常，当我点击单词“DC”时，下拉菜单出现。。。当我在div外单击返回到主体中时，它会隐藏。这相当好，问题是当下拉选择框显示时，我点击它进行选择，它在我进行选择之前消失，因为我使用的是

mouseup（）

函数

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

我试过使用.live、on（单击，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类也是触控类。啊

因为它是一个

元素，

.focusout（）

就可以了

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

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

---

如果它使用同一个类触发多个元素，您只需要一个更好的选择器。我注意到有一组

。“看”

和

”。触摸每个
。您可以使用
.sibbins（）
仅在同一父级
上查找元素

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

我也更新了
你能创建一个演示你的问题吗？它几乎与此相同，尽管我的下拉列表没有保持打开状态，因此我可以进行选择。所有其他功能都是相同的。1.我点击文本2。单击后，下拉列表将显示3。我从下拉列表中进行选择。4.我单击正文外的任何地方，会出现下拉列表并返回到所选文本。步骤3功能不正常。第三步是问题所在。感谢您的关注，我会尝试并回复。我从来没有想过focusout（）。它实际上工作得很好，也正是我所期望的，唯一的问题是它也会启动我在同一页上的日期选择器。这门课很相似。我将在我的原始帖子中的所有内容下面发布日期选择器代码。嗨，库克，你只需要一个更好的选择器来定位确切的元素。我已经更新了我的答案，请查看。非常感谢您帮助我解决问题。
 <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>

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

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

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